HTMLLinkElement : propriété imageSizes

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é imageSizes de l'interface HTMLLinkElement indique la taille et les conditions pour les images préchargées définies par la propriété imageSrcset. Elle reflète la valeur de l'attribut imagesizes de l'élément HTML <link>. Cette propriété permet d'obtenir ou de définir la valeur de l'attribut imagesizes.

L'attribut imagesizes de l'élément <link> est identique à l'attribut sizes de l'élément <img> : une liste de tailles sources séparées par des virgules. Chaque taille source inclut une condition média, la taille de l'image en tant que <length>, ou le mot-clé auto, qui doit apparaître en premier. Pour plus d'informations sur la syntaxe de l'attribut sizes, voir <img>.

Les attributs imagesrcset et imagesizes ne sont pertinents que sur les éléments <link> qui possèdent à la fois un attribut rel défini sur preload et un attribut as défini sur image.

Valeur

Une chaîne de caractères composée de tailles sources séparées par des virgules, 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"
  imagesrcset="narrow.png, medium.png 600w, wide.png 1200w"
  imagesizes="(width < 400px) 200px, (400px <= width < 600px) 75vw, 50vw" />

<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 obtenir et modifier la valeur de l'attribut imagesizes avec la propriété imageSizes :

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

// Changer la valeur
link.imageSizes = "50vw";
log(`Mis à jour : ${link.imageSizes}`);

Spécifications

Specification
HTML # dom-link-imagesizes

Compatibilité des navigateurs

Voir aussi

La propriété HTMLLinkElement.imageSrcset
La propriété HTMLImageElement.sizes
Les Requêtes média
Utiliser les attributs srcset et sizes

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