Image Sprite Sheet Generator

Combines many small images (icons, UI states, character frames) into one downloadable PNG and emits a CSS block that places each by background-position. Reduces HTTP requests when an icon font, an SVG sprite or an actual sprite-sheet pipeline isn't an option. Layout is horizontal strip, vertical strip, or a fixed-column grid; the sheet is sized to fit the largest item in each row or column. Files are processed entirely client-side via canvas — your icons never leave the browser.

The request-count argument is much weaker than it was. Sprite sheets were a response to HTTP/1.1, where a browser opened about six connections per host and every extra file waited in line. HTTP/2 multiplexes requests over one connection, so fifty small icons cost far less than they used to, and the sheet's own disadvantages start to dominate: one changed icon invalidates the whole cached file, and a page that uses three icons still downloads all fifty.

Where a sheet still wins is the case it was always best at, which is many small images all needed at once. A character animation, a set of UI states that change on hover, or a grid of flags shown together load as one decode rather than fifty, and one PNG compresses better than fifty PNGs because the shared palette and the shared header are paid for once.

The CSS is positional, which makes it brittle in a specific way. Each rule names an offset into a fixed layout, so regenerating the sheet with one icon added or removed shifts every position after it and invalidates every rule below that point. Keep the generated CSS and the generated PNG as one artefact and regenerate both together; editing either by hand is where the two drift apart.

For icons specifically, an inline SVG sprite is usually the better answer today. It scales to any size, inherits currentColor, and can be styled per instance, none of which a raster sheet can do. Reach for this when the images are photographs or pre-rendered frames rather than line art.