Preloading responsive images
The imagesrcset and imagesizes attributes with the rel="preload" attribute for the <link> HTML element starts fetching responsive images before they're found in the body of the document. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
The imagesrcset and imagesizes attributes with the rel="preload" attribute for the <link> HTML element starts fetching responsive images before they're found in the body of the document. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 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 | ||||||
| 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 |
Syntax
<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.
Why preload the hero image
Explain when responsive image preload can reduce first-view delay.
Preload guardrails
Keep the responsive hint aligned with the image actually used in the page.
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
Powered by web-features