Lesson 42 of 55 · HTML
The `<picture>` Element and Responsive Images
Duration: 9 min
The <picture> Element – Art Direction & Responsive Images
<picture> lets you serve different images based on media queries, pixel density, or format support.
<picture>
<source media='(min-width: 800px)' srcset='hero-large.webp' type='image/webp' />
<source media='(min-width: 800px)' srcset='hero-large.jpg' type='image/jpeg' />
<source srcset='hero-medium.webp' type='image/webp' />
<img src='hero-medium.jpg' alt='Hero illustration' loading='lazy' />
</picture>
Use cases
- Art direction – Provide a different crop or composition for large screens.
- Format fallback – Serve WebP when supported, otherwise JPEG.
- Pixel‑density – Combine with
srcset(1x,2x) for retina displays. - Conditional loading – Serve a mobile‑optimized image when the viewport is narrow.
Performance notes
- Always include a fallback
<img>inside<picture>for browsers that don’t support the element. - Pair
<picture>with lazy loading (loading='lazy') for off‑screen images. - Keep the total number of
<source>elements reasonable; too many can increase download size.
Quick checklist for <picture>
- Fallback
<img>present with descriptivealt? ✅ typeattributes used for modern formats (image/webp)? ✅- Media queries reflect realistic breakpoints? ✅
loading='lazy'added for non‑above‑the‑fold images? ✅- Tested in browsers without
<picture>support (fallback works)? ✅
Tip: Use the Chrome DevTools Network panel to verify that the correct source is selected for the current viewport.