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:
<link
rel="preload"
as="image"
imagesrcset="narrow.png, medium.png 600w, wide.png 1200w"
imagesizes="(width < 400px) 200px, (400px <= width < 600px) 75vw, 50vw" />
…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 |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
imageSizes
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support