Sprite Sheet Generator

Every image on a page is a request, a connection and a decode. Packing a set of small images into one sheet turns that into a single request, and the CSS shows each frame again by moving the background position under a box of the right size. The same arrangement drives a sprite animation with steps(), and a JSON map of the frame rectangles is what a game engine or a canvas renderer wants instead. The sheet is drawn on a canvas in your browser; the positions, the stylesheet and the map are all produced from the frame sizes alone.

A grid puts every frame in a cell the size of the largest, which makes it trivial to index by row and column and wasteful whenever the frames differ. Shelf packing sorts the frames by height and fills rows in turn, which is tighter — not optimal, since rectangle packing is NP-hard and the perfect answer is not worth computing for a handful of sprites, but usually much better than a grid. Padding is the detail people skip: with frames touching, a scaled or rotated sprite samples a fraction of a pixel past its edge and picks up the neighbour, which is the thin line of wrong colour known as sprite bleed. One or two transparent pixels fixes it.

Transparency survives only if the source images have it and the sheet is exported as PNG — a JPEG sheet flattens the gaps to a colour and shows them behind every frame. No trimming of transparent edges, no edge extrusion (which would fix bleed better than padding), no rotation and no multi-page atlas. Rounding to a power of two is offered because some engines still want it; on the web it only costs memory. Very large sheets decode entirely before the first frame shows, and some mobile browsers cap canvas area, so split a sheet that runs to several thousand pixels a side. Nothing leaves the browser; the same four anonymous usage counts as the rest of the site apply.