Sprite Sheet

What this tool does

Combines all frames of a GIF into one grid image (a sprite sheet), or the other way round, cuts a sheet image into cells and turns them back into frame images and a GIF. Useful for game sprites and CSS animations.

Steps

GIF → sheet

1. Upload a GIF file.
2. Set the columns, gap and cell width and the sheet is shown right away in the preview.
3. Choose the sheet format (PNG or WebP) and press "Save sheet image".

Sheet → frames

1. Upload a sheet image that is not a GIF.
2. Set the number of columns and rows and the grid lines are shown in the preview.
3. Press "Save frames as ZIP" to get a PNG per cell, or set the frames per second, press "Make GIF" and then "Download".

Settings

• Columns/Gap/Cell width: the whole sheet width = columns x cell width + (columns - 1) x gap, and the height works the same way. The cell height follows the original ratio.
• Columns/Rows (sheet → frames): divides the sheet evenly. The cell order starts at the top-left and goes along the row, then the next row.
• Frames per second: the frame rate of the GIF to make.

How it works

In sheet mode all frames of the GIF are unpacked to full composed pictures, shrunk to the cell size and placed from the top-left along each row on a canvas that is saved as PNG or WebP. In slice mode the sheet image is divided into an even grid of columns x rows, and cell edges use rounded whole-number coordinates. A GIF is made by sizing all frames to the first cell's size and encoding them.

Good to know

• If the frame count is less than the number of cells in sheet mode, the leftover cells are empty.
• If the cell size is not a whole number the edges are rounded and may be off by about 1px. It is best to choose a number of cells that divides the image size exactly.
• "Send to Workbench" in sheet → frames mode sends the GIF if you made one, otherwise all cut frame PNGs.
• Results are gone when you close the tab.