What is srcset?
Without srcset, an image tag points to one file, and every visitor downloads it, whether they are on a large high-resolution monitor or a small phone. With srcset, the tag offers a menu: the same image at, say, 480, 960, 1600 and 2400 pixels wide. A companion attribute, sizes, tells the browser how wide the image will be displayed at different screen widths. The browser combines that with the screen's size and pixel density and picks the smallest file that will still look sharp.
There are two ways to write it. Width descriptors, the w values, describe how wide each file is and suit images that change size with the layout. Density descriptors, 1x, 2x and 3x, suit images shown at a fixed size, such as a logo, and supply sharper versions for high-resolution screens. When the image itself needs to change, a different crop for phones for example, the picture element does that job, with srcset inside it.
Why it matters
Why srcset matters
Images are usually the heaviest part of a web page, and the main image is often the element that decides how fast a page feels. Serving a desktop-sized hero to a phone wastes data, slows loading and drags down Largest Contentful Paint, one of the Core Web Vitals that Google uses. Serving a small image to a large high-resolution screen makes the brand look blurry. Srcset fixes both at once, and it is one of the few performance improvements that also improves how a site looks.
In practice
How srcset works in practice
- 01
Most of the work is automated. WordPress has generated srcset and sizes for uploaded images since 2015, creating several sizes on upload, and image CDNs and modern frameworks resize images on the fly. The decisions left to the team are which widths to generate, which formats to offer (WebP or AVIF alongside JPEG) and, most importantly, an accurate sizes attribute that matches how the layout actually displays each image.
- 02
That last part is where sites go wrong, so it is checked. We look at the network panel on a phone and on a desktop to see which file each one actually downloaded, and fix the sizes value whenever the browser is fetching a bigger file than the layout needs. The main image near the top of the page is marked so the browser fetches it early, while images further down are lazy-loaded.
Watch out
What people get wrong about srcset
Leaving sizes off, or setting it to the full screen width, so the browser assumes every image fills the viewport and downloads files far larger than needed. Second, uploading a single small image and expecting srcset to create sharp large versions; it can only choose between files that exist. Third, confusing srcset with art direction. Srcset picks the same image at different sizes; if phones need a different crop, that is the picture element's job. And checking it once, at launch, when every new template and every new image size can quietly undo it.
