Sprite Sheet Generator
Pack images into one sprite sheet PNG with CSS and JSON.
About this tool
Add your images, choose the number of columns and the padding, then download the sprite sheet PNG and copy the CSS (one class per image) or the JSON frame map for game engines.
Using a sprite sheet
A sprite sheet (or texture atlas) combines many small images into one. On the web, CSS sprites load a single file instead of dozens of icon requests and show each icon with background-position; in games and animation, engines draw frames from one texture, which is faster than switching between many. Images are placed on an even grid with each cell as big as the largest image, so animation frames line up, and padding between cells stops neighbouring sprites bleeding in when they're scaled or filtered. The CSS gives a base class plus one class per image, named from its file name, with the exact width, height and offset. The JSON uses the widely supported TexturePacker 'hash' format (frames with x, y, w and h, plus the sheet size) that Phaser, PixiJS and many other engines can read. Transparency is kept, so PNG sources work best. Honest limits: a grid wastes space when images differ a lot in size, so a tight-packing desktop tool is better for big atlases; keep sheets under about 4096 pixels for older devices. The image resizer and the favicon generator are related.
Frequently asked questions
What is a sprite sheet?
A single image containing many smaller images, used by websites and games to load and draw them efficiently.
How do I use the CSS?
Save the PNG as spritesheet.png, add the CSS, and give an element both the base class and an image's class.
Which game engines read the JSON?
It uses the TexturePacker hash format, which Phaser, PixiJS and many other engines support.
Why add padding between sprites?
It stops neighbouring images bleeding into each other when the sheet is scaled or filtered.
Is my file uploaded anywhere?
No. The file is read and processed in your browser on this device; nothing is uploaded or stored.