Responsive Images with srcset and sizes: A Complete Guide
Serving a single image size to all devices wastes bandwidth on mobile and looks blurry on high-DPI screens. The srcset and sizes attributes let browsers choose the optimal image variant automatically.
Key Takeaways
- A 2400px-wide hero image looks crisp on a 27-inch monitor but forces a mobile user to download 2 MB of image data they'll view at 375px wide.
- The `srcset` attribute provides a list of image sources with either width descriptors (`w`) or pixel density descriptors (`x`):
- The `sizes` attribute tells the browser how wide the image will be displayed at various viewport widths.
- The browser multiplies the display width (from `sizes`) by the device pixel ratio (DPR) to determine the ideal image width.
- Create 3-5 variants per image at common breakpoints: 400w, 800w, 1200w, 1600w, and optionally 2400w for 4K displays.
Compress Image
Reduce image file size while keeping quality.
The Problem with Fixed Images
A 2400px-wide hero image looks crisp on a 27-inch monitor but forces a mobile user to download 2 MB of image data they'll view at 375px wide. Conversely, serving only a small image looks pixelated on Retina displays. Responsive images solve both problems by letting the browser select the right variant based on viewport width and device pixel ratio.
Understanding srcset
The srcset attribute provides a list of image sources with either width descriptors (w) or pixel density descriptors (x):
The w descriptor tells the browser the intrinsic width of each image file. The browser then uses this information combined with the sizes attribute to calculate which image to download.
The sizes Attribute
The sizes attribute tells the browser how wide the image will be displayed at various viewport widths. Without sizes, the browser assumes the image occupies the full viewport width, which leads to downloading oversized images.
Common patterns:
100vw— Full-width image (hero banners)50vw— Half the viewport (two-column layout)(max-width: 768px) 100vw, 33vw— Full width on mobile, one-third on desktop(max-width: 768px) 100vw, 800px— Full width on mobile, fixed 800px on desktop
How Browsers Choose
The browser multiplies the display width (from sizes) by the device pixel ratio (DPR) to determine the ideal image width. On a phone with a 375px viewport and 3x DPR displaying a full-width image, the browser needs a 1125w image and selects the closest match from srcset.
Generating Image Variants
Create 3-5 variants per image at common breakpoints: 400w, 800w, 1200w, 1600w, and optionally 2400w for 4K displays. More variants give browsers finer-grained choices but increase storage and build complexity. For most sites, 3-4 widths provide excellent coverage.