The picture Tag
The picture tag lets one image exist in several versions, and the browser picks the right one for the screen. You list source elements with media conditions, then one img tag as the final fallback. In the page it still counts as a single image.
The problem it solves is real: a phone should not download a two megabyte photo sized for a desktop monitor. With picture, small screens fetch small files and large screens get the sharp version. The img tag inside is mandatory; if no source matches, or the browser is old, the img loads.
It works in every modern browser. The browser reads the sources in order and uses the first matching media condition, so order matters: put the most specific source first and the general ones after it. Serving the wrong size image wastes bandwidth on mobile and makes desktop images look soft, so the tradeoff is worth one extra tag.
How the browser chooses
The browser goes through the source elements top to bottom and uses the first media condition that matches the current viewport. If none match, or the browser does not understand picture, it falls back to the img tag. That fallback is what makes the tag safe to use today.
<picture>
<source media="(min-width: 800px)" srcset="wide.jpg">
<source media="(min-width: 400px)" srcset="medium.jpg">
<img src="small.jpg" alt="A city skyline">
</picture>Art direction vs file size
When the same photo just needs a smaller file on small screens, the srcset and sizes attributes on the img tag alone can handle it. Use picture when the image content itself changes, like cropping a landscape photo into a portrait square on phones.
Syntax
<picture>
<source media="(min-width: 600px)" srcset="large.jpg">
<img src="small.jpg" alt="Description">
</picture>Order Matters: First <source> That Matches Wins, And Missing <img> Breaks Everything
In <picture>, browser picks the FIRST <source> whose media+type matches - ordering smallest to largest (or webp before jpg) is critical; reversing it serves the wrong size and kills LCP. The <img> at the end is NOT optional - without it <picture> renders nothing and older browsers show blank. Also, art direction (media) needs picture, resolution switching alone needs srcset+sizes on img.
<picture><source srcset="small.webp" media="(max-width:600px)" type="image/webp"><img src="fallback.jpg" alt="" width="800" height="600"></picture>Good to know
- The img tag inside picture is required.
- Sources are tested in order; first match wins.
- Use it when the image changes shape, not just size.
- Always keep alt text on the inner img.