Responsive Images: srcset, sizes and Art Direction

Why Responsive Images Matter

Different devices (mobile, tablet, desktop) have different screen sizes and resolutions. A single image size is not optimal for all devices.

Large images waste bandwidth on mobile. Small images look pixelated on desktop. Responsive images serve the right size for each device.

Core Web Vitals: Responsive images improve LCP (Largest Contentful Paint) and CLS (Cumulative Layout Shift) metrics.

srcset Attribute

srcset provides the browser with image options at different resolutions. The browser selects the most appropriate image based on the device's DPR (Device Pixel Ratio) and viewport size.

Width descriptor: <img srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w" src="medium.jpg" alt="...">. The w unit specifies the natural width of the image.

Density descriptor: <img srcset="image.jpg 1x, image@2x.jpg 2x" src="image.jpg" alt="...">. The x unit specifies the device's pixel density.

Browser selection: The browser selects the most appropriate image based on viewport size, DPR, and network conditions. This selection is automatic and optimized.

sizes Attribute

sizes specifies the size the image will occupy in the viewport. The browser uses sizes together with srcset to select the most appropriate image.

Example: <img srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w" sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw" src="medium.jpg" alt="...">.

Media conditions: (max-width: 600px) 100vw → On screens smaller than 600px, the image occupies 100% of viewport width.

Fallback: The last value (33vw) is the default size. This value is used when no media condition matches.

vw (viewport width): 100vw = viewport width. 50vw = half of viewport width.

Art Direction

Art direction serves different image compositions (crop, zoom) at different screen sizes. Done with <picture> element.

Example: <picture><source media="(min-width: 800px)" srcset="desktop.jpg"><source media="(min-width: 400px)" srcset="tablet.jpg"><img src="mobile.jpg" alt="..."></picture>.

Use cases: Different crops for hero images. Vertical image on mobile, horizontal on desktop. Different versions for logos and icons.

Format selection: Different formats can also be served with <picture>: <source type="image/webp" srcset="image.webp"><img src="image.jpg" alt="...">.

Lazy Loading and Async Decoding

loading="lazy": Loads the image only when it approaches the viewport. Increases page load speed and saves bandwidth.

decoding="async": Separates image decode process from main thread. Doesn't block page rendering.

fetchpriority="high": High priority for LCP image. Browser loads this image earlier.

Placeholder: Show low-resolution placeholder with blur-up technique. Blurry placeholder is shown while image loads.

Performance Tips

Image formats: Use WebP or AVIF. 25-50% smaller than JPEG. Serve JPEG/PNG as fallback.

Compression: Compress images. Use TinyPNG, Squoosh, or ImageOptim. Quality 80-85 is usually sufficient.

Dimensions: Add width and height attributes to images. Prevents CLS (Cumulative Layout Shift).

CDN: Serve images from CDN. Image CDNs like Cloudinary, Imgix perform automatic resize and format conversion.

Responsive images test: Check which image is loaded in Chrome DevTools Network tab. Test on different viewports.