The Picture Element
The <picture> element provides different image sources for different viewport sizes and screen densities, enabling art direction.
The browser picks the first matching <source> and falls back to <img>.
HTML
Intermediate
5 min read
The HTML Picture Element
Example
<picture>
<!-- WebP for modern browsers, smaller file size -->
<source srcset="hero.webp" type="image/webp">
<!-- Cropped version for mobile -->
<source srcset="hero-mobile.jpg" media="(max-width: 768px)">
<!-- Fallback img -->
<img src="hero.jpg" alt="Hero image" loading="lazy">
</picture> Pro Tip
Always include an <img> as the last child of <picture> — it is the fallback and provides the alt text.