About this tool
Pack a folder of images into a single sprite sheet — used in games for animation frames and on websites for combining icons into one HTTP request. Reduces network overhead and makes asset loading faster. The tool produces both the packed sprite sheet image and a metadata file with each sprite's coordinates.
When to use it
- Producing a CSS sprite from a set of icons to reduce HTTP requests on a website
- Packing animation frames for a 2D game engine (Phaser, Pixi, Godot)
- Building an asset atlas for a web-based game or interactive site
- Producing a sprite sheet for use with `<canvas>` animation
- Combining UI icons into one bundle for an embedded webapp
What to expect
Sprites are arranged in a grid with a fixed cell size, with optional padding to prevent bleeding. Metadata is exported as JSON or CSS coordinates so your code knows where each sprite lives. For irregular sprite sizes, dedicated atlas-packing tools (TexturePacker, etc.) produce tighter results.
Frequently asked questions
What metadata format is exported?
JSON with each sprite's name and bounding box, plus optional CSS-class output for direct use in stylesheets. Game engines typically import the JSON directly.
What if my sprites are different sizes?
Grid-based packing works best when sprites are similar in size. For mixed sizes, the grid uses the largest dimensions and leaves gaps. For optimal packing of irregular sprites, use a dedicated atlas-packing tool.
Can I include padding around each sprite?
Yes. A 1–2 pixel padding prevents bleeding artefacts when the sheet is sampled at non-integer coordinates (common in games with floating-point camera positions).