Build responsive image srcset and sizes attributes for optimal image delivery across screen sizes.
A generator that turns your image variants into the srcset and sizes attributes of an img tag. You enter each file with its real pixel width and describe how wide the image renders at each breakpoint; the tool returns attribute markup you can paste straight into HTML or a template. The one thing most people get wrong: srcset without a matching sizes. When sizes is missing, browsers assume the image fills the full viewport width, so a small card image on a big monitor downloads the largest file you published. Sizes is what makes the width descriptors meaningful.
A concrete input and expected output from the current implementation.
Input
Image variants: hero-400.jpg, hero-800.jpg, hero-1600.jpg. Layout: full viewport width on screens up to 900px wide, half the viewport width on larger screens.
Expected output
<img src="hero-800.jpg"
srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
sizes="(max-width: 900px) 100vw, 50vw"
alt="Hero image"> On a 375px phone at device pixel ratio 1, the first sizes rule applies, the slot is 100vw, about 375px, and the browser picks the smallest candidate at or above that width: hero-400.jpg. On a 1440px monitor the default rule applies, the slot is 50vw, about 720px, and it picks hero-800.jpg. The src value is the fallback for browsers without srcset support.
Each srcset entry pairs a URL with one descriptor. A w descriptor declares the file's intrinsic pixel width; a density descriptor (1x, 2x) declares a fixed scale for a slot whose rendered width never changes. Width entries must be listed in ascending order and the two types cannot be mixed in one srcset. The browser treats the declared width as fact, so it must match the actual file.
The sizes attribute lists media-condition and width pairs; the first condition true for the viewport gives the slot, the CSS pixel width the image will occupy. The browser divides each candidate's declared width by the slot width and picks the smallest candidate at or above the device pixel ratio, falling back to the largest. Without sizes the slot defaults to 100vw, and conditions test viewport width, never container width.
Use 1x/2x when the image renders at a fixed CSS size in every layout, like an avatar. Use w descriptors with sizes when the rendered width changes with the viewport, which is most content images. The two cannot be mixed in one srcset, and without sizes, w descriptors are evaluated against a default 100vw slot.
No. The candidate is selected when the image is fetched, and resizing the viewport after load does not trigger a new selection or download in normal use. Test different widths by reloading at different window sizes, or use the responsive mode in browser devtools.
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.