Image sprite sheet maker
Pack images into an atlas and export coordinates.
How to use Image sprite sheet maker
The Image sprite sheet maker packs multiple images into one PNG grid of square cells and exports a JSON file with each sprite's x, y, width and height. You set the number of columns from 1 to 20, a cell size from 8 to 1,024 pixels and a gap of up to 100 pixels between cells. Images are scaled to fit their cell while keeping aspect ratio.
- Choose a source file. If the tool accepts multiple files, arrange them in the order you want.
- Adjust the basic settings, then open Advanced mode for export and fine-tuning options. Custom settings stay active when the panel is closed.
- Run image sprite sheet maker, review the output, then use the available copy or download controls.
What this tool supports
Pack images into an atlas and export coordinates.
- Columns
- Range: 1 to 20
- Square cell size (px)
- Range: 8 to 1024
- Cell gap (px)
- Range: 0 to 100
Limits and processing
Images use the existing 32-megapixel canvas bound. Up to 100 source images are allowed where supported. Pasted HTML is bounded to 200,000 characters; Mermaid diagrams to 20,000 characters and 300 lines. SVG and PNG generation require a browser.
Frequently asked questions
What does the sprite coordinates JSON contain?
The sprite-coordinates.json file has one entry per image, keyed by its position number and file name, such as 1-icon.png. Each entry gives the x and y offset of the sprite in the sheet and its drawn width and height in pixels.
How are sprites positioned inside each cell?
Every image is scaled down or up to fit inside the square cell while keeping its aspect ratio, then drawn from the top-left corner of the cell. Non-square images therefore leave empty transparent space to the right or below.
Why add a gap between sprites?
A gap of a few pixels keeps neighboring sprites from bleeding into each other when the sheet is scaled or filtered in a game engine or CSS. The gap is added after each cell, and the coordinates in the JSON already account for it.
Where is my input processed?
This operation processes its source in your browser. Copy and download are explicit actions; source input is not saved in an account or history.
What are the input limits?
Images use the existing 32-megapixel canvas bound. Up to 100 source images are allowed where supported. Pasted HTML is bounded to 200,000 characters; Mermaid diagrams to 20,000 characters and 300 lines. SVG and PNG generation require a browser.