Baseline 2023
Newly available
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.
A string composed of comma-separated source sizes, or the empty string "" if unspecified.
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" />
#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}`);
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4