Generate multiple sized versions of images for responsive srcset attributes.
Feed it one image, choose the widths you want, and it returns a resized, re-encoded file for each width plus the srcset markup to serve them. Everything happens locally in your browser, so your original is never uploaded and large photos are fine to use. The surprise most people hit: the output is a menu, not a rule. The browser picks which candidate to download, and if you publish the srcset without a sizes attribute it assumes the image fills 100% of the viewport, so a small inline image can still pull a full-width file.
A concrete input and expected output from the current implementation.
Input
photo.jpg at 2400 x 1600 px; requested widths: 400, 800, 1600 px
Expected output
Three files: photo-400.jpg, photo-800.jpg, photo-1600.jpg, plus this markup: <img src="photo-1600.jpg" srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w" sizes="100vw" >
Each w descriptor equals the pixel width of the matching file, which is what the browser keys on. Rendered full-width on a 375 CSS px phone with a 2x screen (needing roughly 750 px of source), the browser picks photo-800.jpg; on a 1x desktop showing the image at 1400 CSS px it takes photo-1600.jpg, since the 800 px copy would have to upscale.
The tool resamples the source image to each requested width while keeping the aspect ratio, then hands back one downloadable file per width. Each copy is a real resize with the pixels re-encoded at the new size, so file sizes track the dimensions. The original file is never modified. The widest entry is the natural fallback for the src attribute, so the image still renders on clients that ignore srcset.
Each entry pairs a file with a w descriptor, the pixel width of that file. At load time the browser compares the candidate widths with the image's rendered width on the current viewport, applies the device pixel ratio, and downloads the best fit. The sizes attribute tells it how wide the image will actually render; with no sizes attribute the browser assumes 100vw, which makes even small layouts pull full-width files.
No. The resizing and encoding happen entirely in your browser; the original never leaves your machine and nothing is stored. That is also why the tool is safe to feed very large photos - the heavy work stays local and there is no upload size limit imposed by a server.
srcset is a menu and the browser orders from it at load time, using the image's rendered width, the device's pixel ratio, and network conditions - a slow connection can legitimately receive a smaller file. If it consistently overshoots, check sizes first: when that attribute overstates the real rendered width, the browser fetches oversized candidates. The picture element is the only way to force exact files per breakpoint.
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.