Responsive Image Set Builder

How to use Responsive Image Set Builder

Create multiple real image widths plus an HTML srcset snippet and manifest in one local ZIP download. Use one supplied raster for a small responsive resource set. Width descriptors match each generated bitmap; output dimensions and a user-declared maximum CSS layout width are recorded. Enter the layout width as whole-number digits only.

1. Provide one static source image, unique comma-separated output widths, jpeg/webp quality request, maximum layout width in css pixels, alternative text for the html snippet.
2. Choose the supported mode and run the tool. Review its assumptions and any reported errors.
3. Copy the result or download a separate output; reset to clear the current form.

Good to know

• One static PNG, baseline JPEG or simple WebP, at most 8 MiB, 2,000,000 source pixels and 2,048 pixels per side. Strict structural/CRC preflight runs before native decode. APNG, progressive JPEG, extended/animated WebP, compressed PNG metadata and arbitrary SVG/GIF are outside the selected subset. Native orientation must agree with the bounded source dimensions.
• Choose 1–8 unique comma-separated integer widths within the original width. No upscaling. Height is max(1, round(width × original height / original width)); integer rounding can slightly change aspect ratio. Aggregate generated dimensions are capped at 8,000,000 pixels before canvas creation.
• Native decode has a 10-second wait limit and each serial encoder has a 5-second wait limit; native codec work cannot be forcibly aborted. A late bitmap is closed and every canvas is released. Output images total at most 8 MiB and ZIP at most 9 MiB. No user archive is extracted.
• PNG preserves browser-provided alpha; JPEG is explicitly flattened onto white. Browser color conversion, premultiplication, smoothing and encoder quality behavior can alter pixels. Unsupported encoders or a MIME fallback are refused rather than mislabeled.
• The snippet uses width descriptors and a declared sizes layout: 100vw up to your maximum layout width, then that fixed CSS width. This is an authored layout assumption, not an inspection of your website. Files must be hosted together under their generated names. Alternative text is attribute-escaped; the snippet is never mounted.
• The tool does not choose the best responsive breakpoints, compression ratio, format fallback, art direction, CDN configuration or real browser resource-selection outcome. Source metadata is not copied as an archival guarantee.
• Structured text output is limited to 500,000 characters. Reduce the supplied source when that separate output budget is exceeded.
• Inputs are processed on this device and are not automatically saved or uploaded.