Responsive Images (srcset/sizes)

An HTML technique using srcset and sizes attributes to serve different image resolutions based on the user's viewport width and device pixel ratio.

Category: Performance (also: Content Strategy, Front End)

Author: Atomic Glue Performance Team

## Definition

Responsive images use the srcset attribute to specify multiple image candidates with their intrinsic widths (via w descriptors) or pixel ratios (via x descriptors), and the sizes attribute to tell the browser how much of the viewport the image will occupy at different breakpoints. The browser selects the best candidate based on device characteristics, bandwidth, and viewport size, downloading only what is needed.

## How srcset/sizes Work

srcset lists candidate image URLs with width descriptors (e.g., 400w, 800w, 1200w). sizes defines media-conditional image display widths (e.g., (max-width: 600px) 100vw, 50vw). The browser picks the smallest candidate that meets the calculated display size and the device's pixel ratio. The w descriptor + sizes approach is preferred over x descriptors because it accounts for responsive layouts.

## Common Misunderstandings

srcset does NOT cause all candidates to download. The browser downloads only the best match. However, preload scanners in some browsers may discover multiple candidates and cause wasted bandwidth. Using the <picture> element for art-direction (different crops at different sizes) is different from srcset which delivers the same image at different resolutions.

## Optimization Tips

Always include widths that span from smallest expected display to largest (2x retina). Use sizes attribute accurately: lying about sizes wastes bandwidth. Combine with WebP/AVIF via <picture> + <source>. Generate candidates at build time using Sharp or image CDNs with responsive transformation.

## Note

Paired with the <picture> element for format selection, it is the most powerful native responsive image solution. Always include the default src for fallback.

## In code

<img src="/img-400.jpg"
  srcset="/img-400.jpg 400w, /img-800.jpg 800w, /img-1200.jpg 1200w, /img-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
  alt="Responsive image" width="1600" height="900">

## Common questions

Q: Does the browser always pick the best candidate?

A: Broadly yes, based on viewport, pixel ratio, and bandwidth (Chrome uses bandwidth-aware selection).

## Key takeaways

• Serve device-appropriate image resolutions.
• srcset lists candidates; sizes defines layout width.
• Prevents downloading oversized images on small screens.
• Combine with <picture> for format selection.

## Related entries

• [WebP](atomicglue.co/glossary/webp)
• [AVIF](atomicglue.co/glossary/avif)
• [Image Optimization](atomicglue.co/glossary/image-optimization)

Last updated July 2026. Permalink: atomicglue.co/glossary/responsive-images-srcset-sizes