Responsive Images: Picture, Source & srcset

Responsive Images: Serving the Right Image

Images account for ~50% of page weight. Serving correctly sized images is the single biggest performance win for most websites.

Three Approaches

1. srcset + sizes (Resolution Switching)

Let the browser choose the best image based on viewport width and device pixel ratio.

2. <picture> + <source> (Art Direction)

You control which image loads based on media queries — different crops for mobile vs desktop.

3. Format Switching

Serve modern formats (AVIF, WebP) to supporting browsers with JPEG fallback.

Image Format Comparison

Format	Size vs JPEG	Support	Best For
JPEG	Baseline	Universal	Photos
WebP	25-35% smaller	95%+	Photos + transparency
AVIF	50% smaller	85%+	Photos (best quality/size)
SVG	Tiny for vectors	Universal	Icons, logos, illustrations