The Picture Element
The picture element lets a browser select from alternative image sources. Use it when you need a different crop at different widths or want to offer another image format.
How it works
- List source candidates before the final img. The img provides the fallback URL, alternative text, and intrinsic dimensions.
- A source can use media to describe a viewport condition or type to advertise a supported format. The browser chooses an appropriate source in order.
- For different resolutions of the same composition, img srcset and sizes may be enough; picture is especially useful for art direction.
A practical example
<picture>
<source media="(min-width: 50rem)" srcset="images/garden-wide.jpg">
<img src="images/garden-square.jpg"
alt="Raised planting beds beside an accessible path"
width="640" height="640">
</picture>
A wide viewport can receive the landscape crop, while a smaller viewport uses the square fallback. Supply both local files before testing.