The HTML imagesrcset attribute
The HTML imagesrcset attribute lists the image files a preload can choose from, written to match the image's srcset. On <link rel="preload" as="image">, it lets the browser start fetching the file that the matching <img> will pick. Width descriptors such as 800w also need imagesizes.
Overview
The HTML imagesrcset attribute lists image candidates for a <link> that preloads an image. The browser chooses one with the same rules an <img> applies to srcset and starts fetching it early.
The attribute is valid only on a link with rel="preload" and as="image". When the candidates use width descriptors, imagesizes must be there too, to say how wide the image will display.
Like srcset, the list holds comma-separated URLs that can each carry a width descriptor such as 640w or a density descriptor such as 2x. A bare URL counts as 1x, and if one candidate has a width descriptor, they all must have one.
An href on the same link counts as a candidate in only one case. If the candidates use density descriptors and none of them is 1x, the href serves as the 1x file, and once width descriptors appear, the href is left out.
Support for imagesrcset arrived in Chrome 73, Edge 79 and Safari 17.2. Firefox has had it since version 78, but it fully supports rel="preload" only from version 85, so imagesrcset preloads work there from 85.
Syntax
<link rel="preload" as="image"
imagesrcset="hero-640.jpg 640w, hero-1280.jpg 1280w"
imagesizes="100vw">
<img src="hero-1280.jpg" alt="Harbor at sunrise" width="1280"
height="720" srcset="hero-640.jpg 640w, hero-1280.jpg 1280w"
sizes="100vw">Values
| Value |
|---|
| A comma-separated list of image URLs, each with an optional width or density descriptor. |
Example
<link rel="preload" as="image" media="(max-width: 600px)"
imagesrcset="team-crop-480.jpg 480w, team-crop-960.jpg 960w"
imagesizes="100vw">
<link rel="preload" as="image" media="(min-width: 601px)"
imagesrcset="team-wide-1200.jpg 1200w, team-wide-2400.jpg 2400w"
imagesizes="80vw">
<picture>
<source media="(max-width: 600px)"
srcset="team-crop-480.jpg 480w, team-crop-960.jpg 960w"
sizes="100vw">
<img src="team-wide-1200.jpg" alt="The support team at the 2026 meetup"
srcset="team-wide-1200.jpg 1200w, team-wide-2400.jpg 2400w"
sizes="80vw" width="1200" height="600">
</picture>Best practices
- Copy
imagesrcsetandimagesizesfrom the image'ssrcsetandsizesexactly. With 400w, 800w and 1600w files on an 800px-wide 1x screen,imagesizes="50vw"withsizes="100vw"makes Chrome and Firefox fetch the 400w file, then the 800w file. - Preload only an image that shows up early, such as a hero banner. A preload is for resources the page will need very soon.
- For art direction with <picture>, preload each image version with its own link, using a
mediaquery that matches when that version shows. Only the preload whose query matches is fetched. - Skip
hrefwhen every candidate has a width descriptor. Only browsers without imagesrcset support would use it, and they would likely preload the wrong image.
