sizes
The sizes attribute tells the browser the displayed width of a responsive image so it can pick the best srcset candidate.
Syntax
sizes="(media) length, fallback"Examples
<img
srcset="/s.jpg 480w, /m.jpg 960w, /l.jpg 1440w"
sizes="(max-width: 700px) 100vw, 50vw"
src="/m.jpg" alt="Gallery image">
Output
Below 700px the image fills the viewport width; above it, it occupies half, guiding which srcset file loads.
Notes
Each entry is a media condition plus a CSS length; the first match wins, with a bare length as fallback. Only meaningful with width (w) descriptors in srcset. The keyword "auto" defers to the rendered size.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 34 |
| firefox | 38 |
| safari | 9.0 |
| edge | 16 |