You want your website to look sharp on every device — crisp images on large desktop monitors, lighter images on small phone screens to save bandwidth. The <picture> element gives you art direction control: you can serve completely different images depending on the screen size or format support.
How the Picture Element Works
The <picture> element wraps one or more <source> elements and a fallback <img>. The browser looks at each source and picks the first one that matches. If none match, it uses the img tag as the fallback. Think of it as an art-directed version of the srcset approach.
<picture>
<source srcset="hero-wide.jpg" media="(min-width: 800px)">
<source srcset="hero-narrow.jpg" media="(min-width: 400px)">
<img src="hero-small.jpg" alt="Hero banner">
</picture>
Serving Modern Image Formats
One of the best uses for picture is serving modern formats like WebP or AVIF to browsers that support them, while falling back to JPEG for older browsers. The browser picks the first format it can display.
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="A scenic mountain view">
</picture>
Art Direction with Different Croppings
Unlike srcset which serves different sizes of the same image, picture lets you serve completely different images. You might show a wide landscape on desktop but a close-up portrait on mobile — completely different compositions.
<picture>
<source srcset="product-wide.jpg" media="(min-width: 600px)">
<source srcset="product-square.jpg" media="(max-width: 599px)">
<img src="product-fallback.jpg" alt="Product photo">
</picture>
Picture vs Srcset
Use srcset on a regular img tag when you want different sizes of the same image (responsive sizing). Use <picture> when you need different images entirely (art direction) or want to serve different formats. Both approaches are complementary.
<!-- Srcset: same image, different sizes -->
<img src="photo.jpg" srcset="photo-400.jpg 400w, photo-800.jpg 800w" sizes="100vw" alt="Photo">
<!-- Picture: different images for different contexts -->
<picture>
<source srcset="photo-cropped.jpg" media="(max-width: 500px)">
<img src="photo-full.jpg" alt="Photo">
</picture>