Make a sprite sheet from a GIF
A sprite sheet puts all frames of an animation side by side in one picture. Games, CSS animations and many graphics programs play animations from sprite sheets because one image loads faster and is easier to manage than dozens of separate frames.
- Upload the GIF, animated WebP or APNG.
- Choose how many columns the grid should have, or leave 0 for a roughly square sheet.
- Click Split and download the sprite sheet PNG and its JSON file.
What you get
name-sprite-sheet.png: every selected frame at full size, left to right and top to bottom, with transparency kept.name-sprite-sheet.json: the frame width and height, the number of columns and rows, the loop count, and for each frame its number, position (x, y), size and delay in milliseconds.- The separate frames in a ZIP as well, and a contact sheet preview.
A frame in column c and row r (both counted from 0) starts at x = c × width,
y = r × height. In CSS, that becomes the background-position of each step; in a game engine,
the rectangle of each sprite.
Tips
- Keep sheets small enough for their use: a 100-frame GIF of 500 × 500 px makes a very large sheet. Use “Keep every Nth frame” to thin out long animations; very large sheets are refused with a note instead of producing an unusable file.
- Frames with different delays play correctly only if your player reads the delays from the JSON.
- GIF frames are drawn completely (not as the partial updates GIFs store), so each cell of the sheet is a full picture.
More about what this tool reads and writes: GIF Frame Extractor.