HTMLLinkElement : propriété imageSrcset

Baseline 2023

Newly available

Since ⁨December 2023⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

This page was last modified on ⁨7 oct. 2025⁩ by MDN contributors.

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