Responsive Images with srcset and sizes: Complete Guide

Why Responsive Images Matter

A single image can’t serve every device well. A hero image for a 2560px Retina display is 4x larger than what a 375px phone needs. Without responsive images, mobile users download massive files they can’t benefit from. Responsive images let the browser choose the most appropriate source from candidates. The average web page is over 50% images by weight — optimizing them is the single biggest performance lever for most sites.

Using srcset and sizes

The srcset attribute provides image sources at different widths: srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w". The sizes attribute tells the browser how wide the image displays at each viewport: sizes="(max-width: 768px) 100vw, 50vw". The browser picks the smallest image that covers the display at current viewport and pixel density. Use the Aspect Ratio Calculator to determine proper dimensions.

The picture Element

The picture element provides art direction — different crops for different screens, not just different resolutions. It’s also used for format negotiation: serve AVIF to supporting browsers, WebP to the rest, JPEG as universal fallback. Combine both uses for maximum optimization — different formats AND different crops based on viewport width.

Lazy Loading and Performance

Always include loading="lazy" on images below the fold. Don’t lazy-load your LCP hero image — it needs to load immediately. Add fetchpriority="high" to your hero. Always set width and height attributes to prevent CLS. The browser reserves correct space before the image loads, eliminating the layout jump when it appears.