Sprite Sheet Generator
Choose several images to pack into one sprite sheet with a JSON frame list.
Your images are combined inside this page and never uploaded.
What this tool does
Choose your images (animation frames, icons or tiles), set the number of columns and the padding, and the tool arranges them into a single PNG grid. Download the PNG together with a JSON file that gives each frame's name, x, y, width and height, ready for a game engine or CSS.
Arranges your images into a uniform grid sized to the largest image.
Writes the frame positions to a JSON atlas.
How to use it
- Choose two or more images.
- Set the columns (or leave it automatic) and the padding.
- Choose the order and background.
- Download the PNG and the JSON file.
Why use this tool
Packs many images into one PNG grid with the columns and padding you set, and writes a JSON file listing the name, position and size of every frame. Loading many small images costs a request each, and game engines and animation tools prefer one sheet with known frame positions. A sprite sheet puts everything in one file and one lookup table.
Why we built it
We built the sprite sheet generator to write a JSON frame list beside the PNG and to sort frame names naturally. Cut sheets apart with the image splitter and make animations with the GIF maker.
Who this tool is for
- Game developers and pixel artists
- Web designers combining icons
- Animators assembling frames
When to use it
- Making an animation from frames for a game or website.
- Combining icons into one file.
- Creating a tile set from separate tiles.
- Preparing assets for a game engine or a CSS sprite.
How it works
Every cell is as wide and as tall as the largest image, so frames line up on a regular grid. Images smaller than a cell are centred in it. Frames are placed left to right and top to bottom with the padding between cells and around the edge. The JSON lists the sheet size, the cell size and each frame's name and rectangle.
Example: five 32 × 32 images in 3 columns with 2 px padding make a sheet of 104 × 70 pixels; the first frame is at (2, 2) and the fourth wraps to the second row at (2, 36).
Very large sheets are limited to 8,192 pixels on a side, which most browsers can draw. Use fewer images or more columns if you reach it.
What you give it, and what you get back
| Item | Details |
|---|---|
| Images | Several images of any size your browser can open. |
| Columns, padding, order, background | Columns (0 for automatic), padding in pixels, name or added order, and a transparent, white or black background. |
| Output | A PNG sheet and a JSON file listing every frame. |
Issues you may run into
| What you see | Why it happens | What to do |
|---|---|---|
| The order is wrong | Files were sorted by name. | Change the order to "As added" or rename the files. |
| The sheet is too large | It would exceed 8,192 pixels on a side. | Use fewer images or more columns. |
| Frames are different sizes | Cells use the largest size. | Resize the images first for a tighter sheet. |
Assumptions and limitations
- A uniform grid, not tight packing.
- The sheet size is limited to 8,192 pixels on a side.
Frequently asked questions
What is a sprite sheet?
One image that holds many smaller images in a grid, used for animation frames, icons and game tiles.
What is the JSON file for?
It lists each frame's name and position so software can cut out the right part of the sheet.
How are the images ordered?
By file name in natural order by default, so frame2 comes before frame10. You can use the order you added them instead.
Can the images be different sizes?
Yes. Each cell is as large as the biggest image, and smaller ones are centred.
Is anything uploaded?
No. The images are combined in your browser.
Is anything sent to a server?
No. Everything runs in your browser and nothing leaves the page.