# Image sprite sheet maker

> Pack images into an atlas and export coordinates.

[Open tool](https://www.toolcabana.com/ee/image-sprite-sheet-maker) · [Images and photography](https://www.toolcabana.com/ee/category/images-and-photography)

Tool ID: image-sprite-sheet-maker. Requested language: ee. Description language: en. Complete guide translation: no; untranslated sections use English.

## Overview (en)

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.

## Supported tasks (en)

Pack images into an atlas and export coordinates.

## Steps (en)

1. Choose a source file. If the tool accepts multiple files, arrange them in the order you want.
2. Adjust the basic settings, then open Advanced mode for export and fine-tuning options. Custom settings stay active when the panel is closed.
3. Run image sprite sheet maker, review the output, then use the available copy or download controls.

## Settings

- Columns (en; key: columns; type: number); minimum: 1; maximum: 20
- Square cell size (px) (en; key: cell; type: number); minimum: 8; maximum: 1024
- Cell gap (px) (en; key: gap; type: number); minimum: 0; maximum: 100

## Limitations (en)

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.

## Privacy and connections (en)

This operation processes its source in your browser. Copy and download are explicit actions; source input is not saved in an account or history.

## Questions (en)

### 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.

## Related tools

- [Image brightness and contrast editor](https://www.toolcabana.com/ee/image-brightness-and-contrast-editor)
- [Image comparison slider](https://www.toolcabana.com/ee/image-comparison-slider)
- [Image pixel difference checker](https://www.toolcabana.com/ee/image-pixel-difference-checker)
- [Photo contact sheet maker](https://www.toolcabana.com/ee/photo-contact-sheet-maker)