srcset & sizes for Images — A Practical Guide

By Gaurav Bhowmick

The srcset attribute lets you serve different image sizes to different devices. Used correctly, it can cut your image payload by 50% or more on mobile. Here is how it actually works.

The problem srcset solves. A desktop monitor might be 1920px wide. A phone is 390px. If you serve one 1920px image to both, the phone downloads 4x more data than it needs. srcset lets the browser pick the smallest image that still looks sharp on the current device.

Basic srcset syntax. Add width descriptors to tell the browser which sizes are available: <img srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w" sizes="(max-width: 600px) 100vw, 800px" src="photo-800.jpg" alt="description">. The sizes attribute tells the browser how wide the image will display at different viewport sizes.

The sizes attribute matters most. Without sizes, the browser assumes the image is 100vw (full viewport width) and will often pick a larger file than needed. Always set sizes to match your actual CSS layout. If your image displays at 50% of viewport width on desktop: sizes="(max-width: 600px) 100vw, 50vw".

How many sizes to generate. Three to five sizes covers most cases: 400w (small mobile), 800w (large mobile/small tablet), 1200w (tablet/small desktop), 1600w (desktop), 2000w (large/retina desktop). More sizes means more precision but more build complexity. Diminishing returns after five variants.

Preparing images for srcset. You need multiple versions of each image at different widths. Resize your original to each target width, then compress each version. A 400w JPEG at 80% quality might be 30 KB; a 1600w version might be 150 KB. The savings add up across a page with many images.

Real-world impact: a page with ten 1600px images at 150 KB each = 1.5 MB total. With proper srcset, mobile users loading 400px versions at 30 KB each download only 300 KB — an 80% reduction. That is the difference between a 2-second and an 8-second page load on a 3G connection.

Frequently asked questions

Do I need srcset if I use a CDN with automatic resizing?

CDNs like Cloudflare Images or Imgix can generate sizes on the fly, but you still need the srcset markup in your HTML so the browser knows which sizes exist. The CDN handles file generation; srcset handles browser communication.

Does srcset work with WebP and AVIF?

Yes. Combine srcset with the picture element to serve different formats: use a source element for AVIF, another for WebP, and an img fallback for JPEG. The browser picks the best format it supports at the best size.

What if I only have one image size?

Compress it well and set explicit width and height attributes to prevent layout shift. Even without srcset, proper compression can save significant bandwidth. srcset is most valuable on image-heavy pages.

Does lazy loading work with srcset?

Yes. Add loading="lazy" to the img tag alongside srcset. The browser will defer loading until the image is near the viewport, then pick the right size from srcset. Do not lazy-load your LCP image.

🔧

Try MiniPx — free, no signup

Compress, convert, and resize images in your browser. Nothing gets uploaded.

Open MiniPx →