srcset
Responsive images: provide multiple image sources for different screen sizes and pixel densities. Works with sizes for resolution switching and picture for art direction.
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
| Descriptor | Syntax | Use Case |
|---|---|---|
Width (w) | photo-800.jpg 800w | Browser picks based on viewport width + sizes |
Density (x) | logo@2x.png 2x | Fixed-size images at different pixel ratios (icons, logos) |
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
altattribute 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.
srcsetdoes not work on CSSbackground-image. Useimage-set()in CSS for similar resolution switching.- Width descriptors require accurate
sizesvalues. If your layout changes via CSS later, thesizesmay become stale. - Density descriptors are limited to fixed-size images. For fluid layouts, width descriptors are the correct choice.