What is srcset (responsive images)?

Glossary · Updated October 23, 2026 · Also called: responsive images, sizes attribute, picture element

Definition srcset is an HTML attribute of <img> and <source> that lists several versions of the same image with their widths (800w) or pixel densities (2x). Together with the sizes attribute, it lets the browser choose the smallest file that will look sharp for the current layout width and device pixel ratio, so phones don't download desktop-sized images. It is supported in all current browsers.

How does srcset work?

There are two kinds of descriptors:

Density (1x, 2x, 3x) for images shown at a fixed size, such as a logo or avatar. The browser picks by device pixel ratio.
Width (480w, 800w) for images whose size depends on the layout. You also give sizes: how wide the image will be displayed, in CSS pixels or viewport units, for each condition.

With width descriptors, the browser multiplies the slot width from sizes by the pixel ratio and picks the first candidate that is large enough. On a 390 px phone with a ratio of 3 and sizes="100vw", it needs about 1170 pixels; on a 360 px phone with a ratio of 2, 720. Browsers may also choose a smaller file to save data, and they usually won't download a smaller one if they already have a bigger version cached.

Example

<img src="photo-800.jpg"
     srcset="photo-480.jpg 480w, photo-800.jpg 800w,
             photo-1200.jpg 1200w, photo-1600.jpg 1600w"
     sizes="(min-width: 1024px) 50vw, 100vw"
     width="1600" height="1067" alt="Workshop with three people">

Keep src as the fallback, and always set width and height so the browser reserves the right aspect ratio and the image doesn't cause layout shift. If sizes is missing, the browser assumes 100vw, which often makes it download far bigger files than needed for a small column.

srcset vs the picture element

<picture> with <source> elements is for two other jobs: serving different formats (AVIF or WebP with a JPEG fallback) and art direction, where a phone gets a different crop, not just a smaller file. Each <source> can carry its own srcset and sizes.

Why it matters on mobile

Images are usually the largest part of page weight, and the hero image is often the LCP element. Sending a 2400 px image to a phone that needs 1170 wastes data and time. MobileCheck has no srcset check of its own, but oversized images show up in its page weight (flagged over 3 MB) and LCP (flagged over 2.5 s) measurements.

Guides and tools

Sources

All 27 glossary terms, A to Z