Responsive Images Best Practices
Implement responsive images that serve the optimal file size for every device and screen density. Learn srcset, sizes, the picture element, and art direction techniques for modern web development.
Key Takeaways
- A 2400px hero image loaded on a 375px mobile screen wastes 85% of downloaded bytes.
- The `srcset` attribute provides a list of image sources with their widths.
- Create 4-5 size variants from your source image:
- Use `<picture>` when you need different crops (not just sizes) at different breakpoints, such as a landscape hero on desktop becoming a square crop on mobile.
- Responsive images typically reduce image payload by 40-70% for mobile users without any visible quality difference, directly improving LCP and page load metrics.
Compress Image
Reduce image file size while keeping quality.
Why Responsive Images Matter
A 2400px hero image loaded on a 375px mobile screen wastes 85% of downloaded bytes. Responsive images serve appropriately sized files, saving bandwidth and improving load times.
srcset and sizes
The srcset attribute provides a list of image sources with their widths. The sizes attribute tells the browser how wide the image will be displayed at each breakpoint.
Generating Multiple Sizes
Create 4-5 size variants from your source image:
| Width | Target |
|---|---|
| 400px | Mobile portrait |
| 800px | Mobile landscape / tablet |
| 1200px | Desktop |
| 1600px | High-DPI desktop |
| 2400px | 4K displays |
Art Direction with picture
Use
Performance Impact
Responsive images typically reduce image payload by 40-70% for mobile users without any visible quality difference, directly improving LCP and page load metrics.