HTMLLinkElement: imageSizes property

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.

The imageSizes property of the HTMLLinkElement interface indicates the size and conditions for the preloaded images defined by the imageSrcset property. It reflects the value of the <link> element's imagesizes attribute. This property can retrieve or set the imagesizes attribute value.

The <link> element's imagesizes attribute is the same as the <img> element's sizes attribute: a comma-separated source size list. Each source size includes a media condition, the size of the image as a <length>, or the keyword auto, which must come first. For more information about the syntax of the sizes attribute, see <img>.

The imagesrcset and imagesizes attributes are only relevant on <link> elements that have both a rel attribute set to preload and the as attribute set to image.

Value

A string composed of comma-separated source sizes, or the empty string "" if unspecified.

Examples

Given the following <link> element:

html

<link
  rel="preload"
  as="image"
  imagesrcset="narrow.png, medium.png 600w, wide.png 1200w"
  imagesizes="(max-width: 400px) 200px, (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;
}

…we can retrieve and update the imagesizes attribute value with the imageSizes property:

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

// Change the value
link.imageSizes = "50vw";
log(`Updated: ${link.imageSizes}`);

Specifications

Specification
HTML # dom-link-imagesizes

HTMLLinkElement: imageSizes property

Value

Examples

Specifications

Browser compatibility

See also