Responsive Images (srcset)
Also known as: srcset, responsive image sizes, responsive images srcset
Responsive images let the browser pick the best-sized image for each device using the srcset and sizes attributes (or the <picture> element). This avoids sending oversized images to small screens, cutting bandwidth and improving load speed.
- srcset lists width candidates (e.g. 480w, 960w) and sizes tells the browser the display width.
- Use srcset for resolution switching; use <picture> for art direction or format fallbacks.
- Right-sizing prevents phones from downloading desktop-sized images, improving LCP.
How srcset and sizes work
The srcset attribute on an <img> tag lists multiple image candidates with their widths, for example image-480.jpg 480w, image-960.jpg 960w, image-1440.jpg 1440w. The sizes attribute tells the browser how wide the image will display at different breakpoints, so it can choose the smallest file that still looks sharp.
The browser factors in viewport width and device pixel ratio (DPR) to pick a candidate before downloading. A phone never fetches the desktop-sized file, which is the core saving.
srcset vs the picture element
Use srcset + sizes for resolution switching — serving the same image at different sizes. Use the <picture> element with <source> when you need art direction (a different crop per breakpoint) or format fallbacks, such as offering AVIF and WebP with a JPEG fallback.
Both approaches are native HTML and need no JavaScript. They pair naturally with lazy loading for below-the-fold media.
Why right-sizing speeds pages
Serving an oversized image to a small screen wastes bandwidth and delays the Largest Contentful Paint. Responsive images send each device only the pixels it needs, which directly improves Core Web Vitals and reduces data usage.
It is the web equivalent of what Cleanor does on a phone: matching media to what is actually needed instead of hauling around oversized files. Right-sized images plus image compression are the two biggest wins for landing-page speed.