srcset and sizes
The srcset and sizes attributes for <img> elements set a list of possible sources for the image and a corresponding list of size conditions for choosing a source, to show a responsive image that fits the size of the display. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
The srcset and sizes attributes for <img> elements set a list of possible sources for the image and a corresponding list of size conditions for choosing a source, to show a responsive image that fits the size of the display. 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 | |
| 38 | 13 | 38 | 9.1 | 38 | 9.3 | |
| 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 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… | 34 | 12 | 38 | 8 | 34 | 8 |
| 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.
Related links
Powered by web-features