<picture>
The picture element provides multiple image sources so the browser can pick the best one for the viewport and format support.
Syntax
<picture>...<img></picture>Examples
<picture>
<source media="(min-width: 800px)" srcset="/large.jpg">
<source media="(min-width: 400px)" srcset="/medium.jpg">
<img src="/small.jpg" alt="Responsive scene">
</picture>
Output
Renders a different image depending on viewport width, with the small JPEG as fallback.
Notes
The <img> child is mandatory and supplies the fallback plus alt text. Use <source media> for art direction and srcset+sizes on <img> for resolution switching.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 38 |
| firefox | 38 |
| safari | 9.1 |
| edge | 13 |