Responsive Images Guide
Serve the right image size for every device to improve performance and user experience.
Quick Answer
Use srcset to serve multiple image sizes and let the browser choose the best one. Use the <picture> element for art direction (different crops for different screens). Always set sizes to help the browser calculate which source to use.
The srcset Attribute
The srcset attribute lets you provide multiple image sizes. The browser automatically selects the best one based on screen size and pixel density.
<img
src="hero-800.jpg"
srcset="
hero-400.jpg 400w,
hero-800.jpg 800w,
hero-1200.jpg 1200w,
hero-1600.jpg 1600w
"
sizes="(max-width: 600px) 100vw, (max-width: 1200px) 80vw, 1200px"
alt="Hero image"
width="1200"
height="600"
/>The w descriptor tells the browser the actual width of each image. The sizes attribute tells the browser how wide the image will display at different viewport widths.
The Picture Element
Use <picture> when you need different image crops or formats for different screen sizes.
<picture>
<source
media="(min-width: 800px)"
srcset="hero-wide.webp"
type="image/webp"
/>
<source
media="(min-width: 800px)"
srcset="hero-wide.jpg"
type="image/jpeg"
/>
<source
srcset="hero-mobile.webp"
type="image/webp"
/>
<img
src="hero-mobile.jpg"
alt="Hero image"
width="800"
height="600"
/>
</picture>Format Selection with Picture
Use <picture> to serve modern formats with fallbacks:
<picture>
<source srcset="photo.avif" type="image/avif" />
<source srcset="photo.webp" type="image/webp" />
<img src="photo.jpg" alt="Photo" />
</picture>The browser picks the first format it supports. AVIF → WebP → JPG fallback chain gives maximum compression with universal compatibility.
Recommended Image Sizes
| Device | Viewport | Hero Image | Content Image |
|---|---|---|---|
| Mobile | 320-480px | 480w | 400w |
| Tablet | 768-1024px | 1024w | 800w |
| Desktop | 1280-1920px | 1600w | 1200w |
| Retina (2x) | Any | 2× viewport width | 2× display size |