Newly available Useful in modern browsers, but confirm support before making it a core requirement.

Preloading responsive images

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.

Metadata and scripts

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
api.HTMLLinkElement.imageSizes
73
79
78
17.2
73
17.2
HTML attribute
imagesizes
73
79
78
17.2
73
17.2
imagesrcset
73
79
78
17.2
73
17.2
DOM API
imageSrcset

The imageSrcset property of the HTMLLinkElement interface is a string which identifies one or more comma-separated image candidate strings. This property reflects the value of the link element's imagesrcset attribute. This property can retrieved or set the imagesrcset attribute value.
73
79
78
17.2
73
17.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

HTML 
<link rel="preload" as="image"
  imagesrcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  imagesizes="(max-width: 600px) 100vw, 50vw">

Live demo

Responsive image preload

Outline the attributes used to preload a responsive image candidate set.

PreviewFullscreen

Why preload the hero image

Explain when responsive image preload can reduce first-view delay.

PreviewFullscreen

Preload guardrails

Keep the responsive hint aligned with the image actually used in the page.

PreviewFullscreen

Use cases

  • Control document behavior

    Use Preloading responsive images to influence loading, metadata, or script behavior at the document level.

  • Tune performance strategy

    Apply Preloading responsive images when earlier resource hints or document settings improve startup or runtime behavior.

Cautions

  • Test Preloading responsive images in your target browsers and input environments before depending on it as a primary behavior.
  • Provide a fallback path or acceptable degradation strategy when support is still limited.

Accessibility

  • Make sure Preloading responsive images supports the intended task without making the page harder to perceive, understand, or operate.

Related links