srcset
The srcset attribute lists candidate image sources with width or density descriptors for responsive loading.
Syntax
srcset="url1 320w, url2 640w"Examples
<img
src="/img-640.jpg"
srcset="/img-320.jpg 320w, /img-640.jpg 640w, /img-1280.jpg 1280w"
sizes="(max-width: 600px) 100vw, 600px"
alt="Responsive photo">
Output
The browser downloads the smallest image that satisfies the displayed size and device pixel ratio.
Notes
Use w descriptors with the sizes attribute for layout-based selection, or x descriptors for fixed-size DPR switching. The src attribute is the fallback for unsupported browsers.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 34 |
| firefox | 38 |
| safari | 8.0 |
| edge | 16 |