The srcset attribute lets a single <img> (or <picture>'s <source>) reference multiple image variants for different display densities or viewport widths. The browser picks the variant that best matches the device, saving bytes on smaller screens and serving sharper assets on retina displays.
Two flavors:
- Density descriptors (
1x,2x,3x): for fixed-size images. Example:srcset="logo.png 1x, logo@2x.png 2x". The browser picks based ondevicePixelRatio. - Width descriptors (
480w,1200w): for responsive images. Used together with thesizesattribute, which tells the browser how wide the image will render at various viewport widths. Example:srcset="hero-480.jpg 480w, hero-1200.jpg 1200w" sizes="(max-width: 600px) 480px, 1200px".
Why it matters: a 1200px-wide image asset is wasteful on a 320px mobile screen -- it has 14x more pixels than the device can show. Width-descriptor srcset typically saves 40-70% of bytes on mobile compared to a single-source image. Modern build tooling (Next.js, Vite + plugins, Astro) generates the variants automatically; for hand-built sites, a CDN with on-demand image transforms (Cloudflare Image Resizing, Imgix, Cloudinary) is the lightweight option.
For format negotiation (AVIF / WebP / JPEG fallback), use <picture> + <source type=...> instead of cramming format choice into srcset.