Generate HTML picture elements with source sets for art direction and format switching across breakpoints.
This tool assembles the markup for the HTML picture element. You supply the image files you have per format and per breakpoint, and it returns the picture block that serves them: a source element for each combination, ordered so the browser can pick one, with a closing img as the fallback. The thing people most often get wrong: the browser does not weigh your sources and choose the best. It walks the list from top to bottom and takes the first source whose media query matches and whose type it can decode, so the order the generator produces is what decides which file actually renders.
A concrete input and expected output from the current implementation.
Input
1200px and wider: banner-1200.webp, banner-1200.jpg. Below 1200px: banner-800.webp, banner-800.jpg. Alt text: Product launch banner.
Expected output
<picture> <source media="(min-width: 1200px)" srcset="banner-1200.webp" type="image/webp"> <source media="(min-width: 1200px)" srcset="banner-1200.jpg" type="image/jpeg"> <source srcset="banner-800.webp" type="image/webp"> <img src="banner-800.jpg" alt="Product launch banner"> </picture>
Each breakpoint pairs the newer format first, so browsers that can decode WebP never download the JPEG. The last source has no media query, so it serves every viewport below 1200px, and the img element is the final fallback for browsers without picture support while carrying the alt text.
The browser scans the source elements top to bottom and selects the first one whose media attribute evaluates to true and whose type attribute names a format it can decode. Once one source matches, nothing below it is consulted. With min-width queries that means listing the largest breakpoint first, and it means an unconditional source must come after every breakpoint source or it will swallow them all.
Each source's type attribute tells the browser which container format the file uses - image/webp, image/avif, image/jpeg - and a browser skips a source whose type it does not support without downloading the file. The img element at the end is not a suggestion: browsers without picture support render it directly, and it is where alt text and the guaranteed-valid default src live.
No. It takes the first source in document order whose media query matches and whose format it supports, and stops there. With min-width queries, list breakpoints from largest to smallest. If you would rather order them ascending, rewrite the queries as max-width with the smallest first. Either scheme works; mixing them is where surprises come from.
The img is required, not vestigial. Browsers without picture support render it directly, so without it nothing shows for them. It also carries the alt text, the width and height attributes, and the src the browser falls back to when every source is skipped. Removing it breaks older browsers and loses your accessibility text.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.