srcset

Overview

The srcset attribute lets you provide multiple image files at different sizes or resolutions so the browser can pick the best one for the current viewport and device pixel ratio. It replaces the old pattern of serving a single oversized image to every device.

There are two approaches: width descriptors (with the sizes attribute) for resolution switching, and density descriptors for fixed-size images at different pixel ratios. For entirely different crops at different breakpoints, use the <picture> element for art direction.

Applies to: <img>, <source> (inside <picture>)

Values

You cannot mix w and x descriptors in the same srcset.

Width Descriptors + sizes

For content images that scale with the layout, use width descriptors. The sizes attribute tells the browser how wide the image will render at each breakpoint, so it can calculate which file to download before CSS is parsed.

The sizes value (min-width: 768px) 50vw, 100vw means: above 768px the image occupies 50% of the viewport; below that, 100%. The browser multiplies this by the device pixel ratio to pick a file.

Common Mistake

Using srcset with width descriptors but omitting sizes causes the browser to assume sizes="100vw". On a page where the image is only 50% wide, the browser downloads a file twice as large as needed.

Density Descriptors

For fixed-size images (logos, icons, avatars), density descriptors are simpler. The browser matches the descriptor to the device pixel ratio.

Art Direction with picture

When you need different crops or aspect ratios at different breakpoints (not just different resolutions of the same image), use <picture> with <source media="..."> elements. The browser picks the first <source> whose media query matches.

Format Negotiation

Combine <picture> with type to serve modern formats (AVIF, WebP) with JPEG fallback. The browser picks the first format it supports.

Accessibility

• The alt attribute is still required on the <img> element. It applies regardless of which source the browser selects.
• Screen readers announce the same alt text no matter which resolution loads, so ensure it describes the content, not the file size.
• Art direction changes (e.g., cropping out context at mobile sizes) may lose information relevant to the alt text. Review alt descriptions for all crops.

Limitations

• The browser's source selection is a hint, not a guarantee. It may cache a higher-resolution image from a previous visit and reuse it.
• You cannot control which image the browser selects via JavaScript; the selection algorithm is internal.
• srcset does not work on CSS background-image. Use image-set() in CSS for similar resolution switching.
• Width descriptors require accurate sizes values. If your layout changes via CSS later, the sizes may become stale.
• Density descriptors are limited to fixed-size images. For fluid layouts, width descriptors are the correct choice.