srcset / <picture> Builder
Build responsive image markup with srcset and sizes.
Overview
The srcset / <picture> Builder generates responsive image markup — <img srcset> with width descriptors and a sizes attribute, or <picture> with <source media> art direction and format fallback (AVIF, WebP, JPEG). It produces tags that the browser uses to pick the smallest image that meets the device's display needs.
Useful for performance-conscious developers learning how to build a srcset attribute for responsive images or how to use the picture element for art direction. Reach for it cutting page weight, hitting Core Web Vitals targets, or serving AVIF to capable browsers while keeping a JPEG fallback.
How it works
The HTML Living Standard defines srcset as a list of URL widthDescriptor pairs (e.g. img-800.jpg 800w). Combined with a sizes attribute that tells the browser the rendered width per viewport (e.g. (min-width: 600px) 50vw, 100vw), the browser computes the actual CSS pixel width and picks the best candidate.
<picture> wraps multiple <source> elements that can switch by media query (art direction — different crops per breakpoint) or by format (type="image/avif" first, then WebP, then a final <img> JPEG fallback). The first matching <source> wins, so order matters: most preferred format first.
Examples
- A simple responsive
<img>→srcset="img-400.jpg 400w, img-800.jpg 800w, img-1200.jpg 1200w" sizes="(min-width: 800px) 50vw, 100vw". - AVIF + WebP + JPEG →
<picture><source srcset="img.avif" type="image/avif"><source srcset="img.webp" type="image/webp"><img src="img.jpg" alt="..."></picture>. - Art direction → different
<source>elements withmediafor portrait vs landscape crops. - A high-DPI display set →
srcset="img.jpg, img@2x.jpg 2x, img@3x.jpg 3x"using pixel-density descriptors.
FAQ
Width descriptors vs pixel-density descriptors?
Width descriptors (800w) plus sizes let the browser handle every variable — pixel density and viewport width — itself. Pixel-density (2x) is simpler for icons but doesn't adapt to layout changes.
Why does my srcset always pick the largest?
Likely a sizes value that always evaluates to 100vw. Adjust sizes to reflect the actual rendered width per breakpoint.
Should I always use <picture>?
Only when you need different crops per breakpoint (art direction) or modern-format fallback. For a single image at multiple sizes, <img srcset> is simpler.
Does srcset hurt SEO?
No. Search engines understand srcset and index the largest candidate. Make sure the canonical src (or main <img>) is descriptive and serves a reasonable default.