Pack a sprite sheet

Fifty small images, one HTTP request — pack them into a PNG atlas with a JSON map of where each frame landed.

Tools used in this guide

The job

Sprite atlases cut asset requests and enable fast frame animation — but the packing has to produce a map of where each image went, or the atlas is useless.

Pack

Drop the images, choose grid (uniform cells) or row-packed (variable sizes), set padding and max width, then download the PNG and the JSON map together.

Grid mode: every frame gets a cell the size of the largest image — predictable for fixed-frame animation.
Row-packed mode: variable sizes hug tighter — better for icons of mixed dimensions.

Worked example

Twelve 32×32 icons at 2 px padding, max width 1024: a 410×36 row-packed atlas plus {"icon-a": {"x":2,"y":2,"w":32,"h":32}, …} — enough for a loader to blit each frame.

Where it stops

Up to 200 images — each within 40 MP and 12,000 px per side, and 100 MP combined so memory stays bounded; atlas ≤8,192 px per side and ≤40 MP. Images are drawn at native size — there is no trimming of transparent margins or rotation for tighter packs. The JSON is a simple name→rect map, not engine-specific formats like TexturePacker's.