What is a sprite sheet?

A sprite sheet, also called a texture atlas, is one image that holds many smaller images, with a data file that says where each one sits. This page makes both: atlas.png, and atlas.json listing every frame's x, y, width and height in that image.

What is the difference between grid and packed mode?

Grid mode gives every sprite a cell as wide as the widest sprite and as tall as the tallest, fills the cells left to right and top to bottom in the order of your list, and puts each sprite at its cell's top left. You can set the columns, the rows, both or neither; with neither it picks the squarest grid. Packed mode sorts the sprites tallest first, lays them on rows, tries each row width up to your width limit and keeps the layout with the smallest area, then the squarer one. The same images and settings always give the same atlas, though not always the smallest possible.

What does the JSON file contain?

A frames array in the order of your list. Each entry has filename, frame (x, y, w and h: where the pixels are in atlas.png), rotated, trimmed, spriteSourceSize (the part of the original that was kept) and sourceSize (the original width and height). The meta block gives the image name, the atlas size, the padding and the extrusion, and in grid mode the columns, rows, cell size, margin and spacing.

What do padding and extrude do?

Padding is clear space on every side of each sprite, so neighbouring sprites are at least twice the padding apart and at least the padding away from the atlas edge. Extrude repeats each sprite's outer row and column of pixels outward by the number you set, between the sprite and its padding, so a game engine that samples just outside a frame reads that sprite's own edge colour rather than empty space or a neighbour. The JSON frame is always the sprite's own rectangle.

How does trimming work, and can I get each original back?

Trim keeps only the box around each sprite's visible pixels and leaves out the fully transparent rows and columns around it. The JSON keeps that box's offset and the original size, so drawing the frame, turned back first if it was rotated, at spriteSourceSize x and y in a sourceSize canvas gives back the original. After every change this page does exactly that for every frame and compares all four channels of every pixel before it offers the downloads. A sprite that is fully transparent is kept as one clear pixel.

When are sprites rotated?

Only when Allow rotation is on, and only in packed mode. The packer then also tries laying tall sprites on their side, and turning only the sprites that fit no other way, and keeps whichever layout has the smallest area, then the squarer one; when turning gains nothing, nothing is turned. A rotated frame is stored turned 90 degrees clockwise and marked rotated: true, and its frame in the JSON is the rectangle it occupies, as wide as the sprite is tall.

Which image formats can I add?

PNG, JPEG, WebP, GIF and BMP. PNG files are decoded by this page itself, including every bit depth, palettes and interlacing, and 16-bit PNGs are reduced to 8 bits a channel. The other formats are decoded by your browser. A fully transparent pixel is written as transparent black. An animated GIF, WebP or PNG adds one still image, not every frame; the GIF to sprite sheet tool packs every frame of a GIF with its timings. SVG files are not packed: export them as PNG first.

What are the size limits?

Each image can be up to 4096 px a side and 64 MB, with up to 1,000 images and 32 million pixels in all, and the atlas can be up to 4096 x 4096 px; you can set a smaller width and height limit. Each file's declared size is read from its header before it is decoded, so a file past a limit is refused with a message that says which one.

Are my images uploaded?

No. Images are read, packed and written as PNG in this browser tab, and nothing is sent anywhere. Only your settings are remembered on this device; the images are not kept after you leave the page.

Sprite Sheet Maker

Add PNG, JPEG, WebP, GIF or BMP images and this page packs them into one sprite sheet: a grid of equal cells, or a packed atlas that places the tallest sprites first on rows and keeps the row width that gives the smallest area. Padding, edge extrusion, trimming of clear edges and rotation are yours to set, and the JSON records every frame's rectangle, trim and rotation in the order of your list. PNG files are read and the atlas PNG is written by this page itself rather than through a browser canvas, so partly transparent pixels in an 8-bit PNG keep their exact colour, and every frame is cropped back out of the atlas and compared with its source before the downloads are offered.

Pack images into one sprite sheet

PNG, JPEG, WebP, GIF or BMP. They are read in this browser and never uploaded.

Choose images

Atlas: none yet
Placed: none yet
Sprite pixels: none yet
Export: PNG + JSON

Four 16 x 16 sprites, 2 x 2 gridpadding 0
atlas 32 x 32, frames at 0,0 16,0 0,16 16,16
The same four, padding 22 px clear on every side
atlas 40 x 40, sprites at x and y 2 and 22; padded 20 x 20 boxes never overlap
Crop example-slime back outframe 24 x 20 at 35,1, trim 4,12 of 32 x 32
placed at 4,12 in a 32 x 32 canvas it matches the original pixel for pixel; so do all 6 frames

Packed mode sorts the sprites tallest first and lays them in rows, trying each row width up to your width limit and keeping the layout with the smallest area. Grid mode gives every sprite a cell as wide as the widest sprite and as tall as the tallest, in list order, each sprite at its cell's top left. Padding is clear space on every side of each sprite; extrusion adds a ring of repeated edge pixels between a sprite and its padding. Images can be up to 4096 px a side and 64 MB a file, 1,000 images and 32 million pixels in all, and the atlas up to 4096 x 4096 px.

Accuracy. Packing follows one stated rule, so the same images and settings always give the same atlas, though not always the smallest one. Every trim and rotation is written into the JSON beside each frame's position, and cropping the atlas by that JSON gives back every sprite pixel for pixel as it was read. Atlases go up to 4096 x 4096 px and are packed in this browser tab, never uploaded.

Common questions

What is a sprite sheet?: A sprite sheet, also called a texture atlas, is one image that holds many smaller images, with a data file that says where each one sits. This page makes both: atlas.png, and atlas.json listing every frame's x, y, width and height in that image.
What is the difference between grid and packed mode?: Grid mode gives every sprite a cell as wide as the widest sprite and as tall as the tallest, fills the cells left to right and top to bottom in the order of your list, and puts each sprite at its cell's top left. You can set the columns, the rows, both or neither; with neither it picks the squarest grid. Packed mode sorts the sprites tallest first, lays them on rows, tries each row width up to your width limit and keeps the layout with the smallest area, then the squarer one. The same images and settings always give the same atlas, though not always the smallest possible.
What does the JSON file contain?: A frames array in the order of your list. Each entry has filename, frame (x, y, w and h: where the pixels are in atlas.png), rotated, trimmed, spriteSourceSize (the part of the original that was kept) and sourceSize (the original width and height). The meta block gives the image name, the atlas size, the padding and the extrusion, and in grid mode the columns, rows, cell size, margin and spacing.
What do padding and extrude do?: Padding is clear space on every side of each sprite, so neighbouring sprites are at least twice the padding apart and at least the padding away from the atlas edge. Extrude repeats each sprite's outer row and column of pixels outward by the number you set, between the sprite and its padding, so a game engine that samples just outside a frame reads that sprite's own edge colour rather than empty space or a neighbour. The JSON frame is always the sprite's own rectangle.
How does trimming work, and can I get each original back?: Trim keeps only the box around each sprite's visible pixels and leaves out the fully transparent rows and columns around it. The JSON keeps that box's offset and the original size, so drawing the frame, turned back first if it was rotated, at spriteSourceSize x and y in a sourceSize canvas gives back the original. After every change this page does exactly that for every frame and compares all four channels of every pixel before it offers the downloads. A sprite that is fully transparent is kept as one clear pixel.
When are sprites rotated?: Only when Allow rotation is on, and only in packed mode. The packer then also tries laying tall sprites on their side, and turning only the sprites that fit no other way, and keeps whichever layout has the smallest area, then the squarer one; when turning gains nothing, nothing is turned. A rotated frame is stored turned 90 degrees clockwise and marked rotated: true, and its frame in the JSON is the rectangle it occupies, as wide as the sprite is tall.
Which image formats can I add?: PNG, JPEG, WebP, GIF and BMP. PNG files are decoded by this page itself, including every bit depth, palettes and interlacing, and 16-bit PNGs are reduced to 8 bits a channel. The other formats are decoded by your browser. A fully transparent pixel is written as transparent black. An animated GIF, WebP or PNG adds one still image, not every frame; the GIF to sprite sheet tool packs every frame of a GIF with its timings. SVG files are not packed: export them as PNG first.
What are the size limits?: Each image can be up to 4096 px a side and 64 MB, with up to 1,000 images and 32 million pixels in all, and the atlas can be up to 4096 x 4096 px; you can set a smaller width and height limit. Each file's declared size is read from its header before it is decoded, so a file past a limit is refused with a message that says which one.
Are my images uploaded?: No. Images are read, packed and written as PNG in this browser tab, and nothing is sent anywhere. Only your settings are remembered on this device; the images are not kept after you leave the page.

Packing follows one stated rule, so the same images and settings always give the same atlas, though not always the smallest one. Every trim and rotation is written into the JSON beside each frame's position, and cropping the atlas by that JSON gives back every sprite pixel for pixel as it was read. Atlases go up to 4096 x 4096 px and are packed in this browser tab, never uploaded.