Arrange the images and inspect the sprite preview. The generated CSS gives each image its own size and background position in the sheet, and the ZIP holds the PNG and the stylesheet together.
Runs locally in your browserThe generator draws the images you select onto one transparent PNG and writes the CSS that puts each image back on screen with background-position. Canvas builds the sheet and JSZip prepares the archive, both inside the page: nothing is uploaded.
Every cell is as wide and as tall as the largest image in the selection, and each image is centred inside its cell. The per-image rules keep the image’s own width and height, so a 16 × 16 icon and a 64 × 4 stripe share one sheet without being resized.
One base class opens the file — .sprite-<prefix> with display: inline-block, background-image: url("voritools-sprite.png") and background-repeat: no-repeat — followed by one rule per image: .<prefix>-<name> with that image’s width, height and negative background-position inside the sheet.
The prefix and the file names are normalised the same way: lowercased, runs of other characters replaced by a single dash, leading and trailing dashes dropped. my icon.png becomes my-icon, a repeated name gets -2 and -3, and a prefix with nothing left after cleaning falls back to icon, so the base class and the rules always line up.
One run takes at most 50 files and 250 MB of input, and the canvas may not pass 16384 pixels per side or 32,000,000 pixels in total. A larger sheet stops with “The generated canvas is too large for reliable browser processing.” and exports nothing.
A 51st file is not dropped in silence: the status line names how many files went over the limit while the list keeps the first 50. Columns and Padding are rounded to whole pixels before they are used — a typed 2.5 becomes 3 columns — and the field is updated to the value that was applied, so the canvas maths and the exported positions always agree.
Everything runs in the browser. Adding images, generating, copying the CSS, downloading the ZIP and clearing the list sent no network requests at all in the probe run (en, fr and ja) once the page had loaded, and the images never leave the device.
The sheet is drawn with the browser’s own image decoder, so PNG, JPEG and SVG files load the way they do anywhere else, and a truncated or empty file is refused with “This browser cannot decode that file format.” An SVG without width and height attributes is drawn at the browser’s default 300 × 150 object size.