Picture Srcset Generator
Build picture, source, and fallback img markup from responsive image candidates.
Compose responsive picture markup
Responsive images need coordinated source candidates, type hints, media conditions, a sizes expression, and a dependable fallback. This generator parses each candidate row into URL, width or density descriptor, MIME type, and optional media rule. Candidates sharing the same type and media condition are grouped into one source element, while user text is escaped before becoming an HTML attribute.
The defaults produce a WebP source containing 480w and 960w candidates, a JPEG source, and a lazy fallback img using hero.jpg with City skyline as alt text. The sizes attribute tells the browser the intended rendered width, allowing it to choose an efficient candidate. Invalid descriptors or MIME syntax return an error rather than malformed markup.
Descriptors, sizes, and fallback behavior
A width descriptor is useful only when the sizes expression approximates the actual CSS layout. Art-directed crops should use separate media groups, and decorative images need intentionally empty alt text rather than a filename. The markup is built locally in your browser and does not request any image URL. Verify intrinsic dimensions, aspect ratios, loading priority, and browser format support in the final page.
Frequently Asked Questions
What descriptors can each candidate use?
The parser accepts width descriptors such as 480w and pixel-density descriptors such as 2x.
How are candidates grouped into source elements?
Rows with the same MIME type and media condition share one srcset list.
Does the generator check whether image URLs exist?
No. It creates markup without fetching assets, so paths and dimensions must be verified in the site.
Browse the full set of free, private, in-browser tools.