srcset and sizes
The srcset property of the HTMLImageElement interface identifies one or more image candidate strings, separated using commas (,), each specifying image resources to use under given circumstances. Each image candidate string contains an image URL and an optional width or pixel density descriptor that indicates the conditions under which that candidate should be used instead of the image specified by the src property. It reflects the <img> element's srcset content attribute.
The srcset property, along with the sizes property, are a crucial component in designing responsive websites, as they can be used together to make pages that use appropriate images for the rendering situation.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 34 | 12 | 38 | 8 | 34 | 8 | |
| HTML attribute | ||||||
sizes | 38 | 12 | 38 | 9.1 | 38 | 9.3 |
srcset | 34 | 12 | 38 | 8 | 34 | 8 |
sizes | 38 | 13 | 38 | 9.1 | 38 | 9.3 |
srcset | 38 | 13 | 38 | 9.1 | 38 | 9.3 |
| DOM API | ||||||
| The sizes property of the HTMLImageElement interface allows you to specify the layout width of the image for each of a list of media queries, or auto for lazy-loaded images to allow the browser to automatically select an image to display based on the layout size of the element. This allows the browser to choose between different images specified in the… | 38 | 13 | 38 | 9.1 | 38 | 9.3 |
| The sizes property of the HTMLSourceElement interface is a string representing a list of one or more sizes, representing sizes between breakpoints, to which the resource applies. | 38 | 13 | 38 | 10.1 | 38 | 10.3 |
| The srcset property of the HTMLSourceElement interface is a string containing a comma-separated list of candidate images. | 38 | 13 | 38 | 10.1 | 38 | 10.3 |
- This feature was removed in a later browser version (38)
- Supports a subset of the syntax for resolution switching (using the `x` descriptor), but not the full syntax that can be used with `sizes` (using the `w` descriptor).
- This feature was removed in a later browser version (38)
- Supports a subset of the syntax for resolution switching (using the `x` descriptor), but not the full syntax that can be used with `sizes` (using the `w` descriptor).
- This feature was removed in a later browser version (38)
- Supports a subset of the syntax for resolution switching (using the `x` descriptor), but not the full syntax that can be used with `sizes` (using the `w` descriptor).
- This feature was removed in a later browser version (38)
- Supports a subset of the syntax for resolution switching (using the `x` descriptor), but not the full syntax that can be used with `sizes` (using the `w` descriptor).
- The `sizes` attribute is supported since Safari 9.1.
- The `sizes` attribute is supported since Safari on iOS 9.1.
- The `srcset` attribute is supported since Safari 9.1.
- The `srcset` attribute is supported since Safari on iOS 9.1.
Syntax
<!-- resolution-based --> <img src="photo-1x.jpg" srcset="photo-1x.jpg 1x, photo-2x.jpg 2x" alt="responsive image"> <!-- viewport width-based --> <img src="photo-800.jpg" srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w" sizes="(max-width: 600px) 100vw, 50vw" alt="responsive image"> <!Live demo
Responsive image candidates
Pair srcset with a normal img fallback and let the browser choose a candidate.
Card with responsive thumbnail
Use srcset inside a content card so the preview scales without changing semantics.
Use cases
-
Control document behavior
Use srcset and sizes to influence loading, metadata, or script behavior at the document level.
-
Tune performance strategy
Apply srcset and sizes when earlier resource hints or document settings improve startup or runtime behavior.
Cautions
- Test srcset and sizes in your target browsers and input environments before depending on it as a primary behavior.
Accessibility
- Make sure srcset and sizes supports the intended task without making the page harder to perceive, understand, or operate.