HTMLLinkElement : propriété imageSrcset

Baseline 2023

Newly available

Depuis ⁨December 2023⁩, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.

La propriété imageSrcset de l'interface HTMLLinkElement est une chaîne de caractères qui identifie une ou plusieurs chaînes candidates d'image séparées par des virgules. Cette propriété reflète la valeur de l'attribut imagesrcset de l'élément HTML <link>. Cette propriété permet d'obtenir ou de définir la valeur de l'attribut imagesrcset.

Chaque chaîne candidate d'image contient une URL d'image et un descripteur optionnel de largeur et/ou de densité de pixels indiquant les conditions dans lesquelles cette image candidate doit être utilisée.

"images/team-photo.jpg, images/team-photo-retina.jpg 2x, images/team-photo-large.jpg 1400w"

Pour les éléments HTML <link> avec rel="preload" et as="image", l'attribut imagesrcset a une syntaxe et une sémantique similaires à l'attribut srcset de l'élément <img>, qui indique de précharger la ressource appropriée utilisée par un élément <img> avec des valeurs correspondantes pour ses attributs srcset et sizes.

Si la propriété imageSrcset inclut des descripteurs de largeur, la propriété imageSizes doit être non nulle, sinon la valeur de imageSrcset sera ignorée.

Valeur

Une chaîne de caractères composée d'une liste séparée par des virgules d'une ou plusieurs chaînes candidates d'image, ou la chaîne de caractères vide "" si non spécifiée.

Exemples

Given the following <link> element:

html

<link
  rel="preload"
  as="image"
  imagesizes="50vw"
  imagesrcset="bg-narrow.png, bg-wide.png 800w" />

<pre id="log"></pre>

#log {
  padding: 0 0.25rem;
  font-size: 1.2em;
  line-height: 1.4;
}

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

…on peut accéder à la valeur de l'attribut imagesrcset, et la modifier, en utilisant la propriété imageSrcset :

const link = document.querySelector("link");
log(`Original: ${link.imageSrcset}`);

// ajouter une chaîne candidate d'image
link.imageSrcset += ", bg-huge.png 1200w";
log(`Mis à jour : ${link.imageSrcset}`);

Spécifications

Specification
HTML # dom-link-imagesrcset

Compatibilité des navigateurs

Voir aussi

La propriété HTMLLinkElement.imageSizes
La propriété HTMLImageElement.srcset
Chargement spéculatif
Images adaptatives

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨7 oct. 2025⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content