Turn a GIF into a sprite sheet
Every frame of an animated GIF laid out as one PNG grid for a game, a web animation or a texture atlas, made on your device.
- Nothing is uploaded
- Works offline after first visit
- Open source
- No watermark. Sheets are capped at 8,192 px a side, and the page says so before it draws.
Turn an animated GIF into one sprite sheet PNG with every frame in a grid, plus an optional JSON of each frame’s position and delay. It is free, needs no account and adds no watermark, and your files are not uploaded: everything runs in your browser on your device. A sheet is capped at 8,192 px a side and about 33 million pixels (half that on phones); give the page a short while after one visit to save itself for offline use, and then it works offline.
Done
Free, no ads. Support StayPut
Open the network tab. Your files never appear in it.
Add files and run the tool to see every request this tab makes.
Your files are processed on this device and never sent to a server. Reload the page to clear everything from memory.
A sprite sheet is one image holding every frame of an animation side by side, so a game or a web page loads a single file and shows one cell at a time. A GIF holds the same frames, but a game engine or a CSS animation cannot step through a GIF: it needs the frames laid out in a grid.
A worked example: you have a 24-frame running cycle as a GIF at 128 × 128 px. Drop it here and the page draws each frame as the GIF shows it, with the earlier frames and the disposal rules applied, so a frame that stores only the changed part still comes out whole. With the columns left on Auto the 24 frames fall into a 5 × 5 grid of 640 × 640 px, one cell empty. Tick the JSON box and you also get the x, y, width, height and delay of every cell, so your code can find frame 7 without counting pixels.
Two things to know. A GIF has at most 256 colours and 1-bit transparency, so the sheet is exactly as good as the GIF, not better; transparent pixels stay transparent in the PNG. And a long GIF at a big size makes a big sheet: past 8,192 px a side, or about 33 million pixels, the page stops before drawing and tells you to use a smaller frame size or every 2nd frame.
How it works
- Drop the animated GIF.
- Leave the columns on Auto for a near-square grid, or set your own; add padding if your engine bleeds neighbouring cells, and choose Every 2nd frame to halve the count.
- Press Make sprite sheet and save the PNG and the JSON.
In your browser, not on a server
Your browser decodes the GIF one frame at a time, drawing each frame as it plays (earlier frames and disposal rules applied) onto one canvas, or decodes each picture you dropped. The cell size is the first frame’s, the grid is worked out and checked against the size limits before anything is drawn, and the canvas is saved as a PNG; the JSON lists where each frame went. To go back, the sheet is decoded, cut into cells by columns and rows or by cell size, and each cell is written as a GIF frame by gifenc (MIT), which keeps a frame’s own colours when it has 256 or fewer.
Compared with upload-based tools: Online sprite sheet tools upload your frames, and many cap the free size or add a watermark. Here the art stays on your device, there is no watermark, and the page tells you before it draws if a sheet would be too large.
Verify it yourself. Give the page a short while after one visit to save itself for offline use, then turn off Wi-Fi or switch to airplane mode and run the tool again. Or open your browser's developer tools (F12, or Cmd-Option-I on a Mac), pick the Network tab, and watch it while you convert. The panel above does the same count for you.
Questions
Does the sheet keep the GIF’s transparency?
Yes. Transparent pixels stay transparent in the PNG unless you pick a white or black background. The GIF itself only had on or off transparency, so soft edges are not added.
Why did the page refuse my GIF?
Frames times frame size would make a sheet over 8,192 px on a side or about 33 million pixels (half that on a phone). A 200-frame GIF at 512 px is far past that. Choose a smaller Frame size, Every 2nd or 3rd frame, or use a shorter GIF.
What do the delays in the JSON mean?
Each frame’s delay is in milliseconds, as the GIF stores it. A delay of 10 ms or less is listed as 100 ms, which is how browsers play it. If you use Every 2nd frame, each kept frame takes the time of the frame it replaced, so the animation lasts as long as before.
Can I turn the sheet back into a GIF?
Yes: Sprite sheet to GIF cuts it by columns and rows, and to save the frames as separate PNGs use GIF frame splitter. The Sprite sheet maker also takes a set of pictures instead of a GIF.
Is the file uploaded anywhere?
No. There is no server in this process. The page is a static file and the work is done by code running inside your browser tab. Give the page a short while after one visit to save itself for offline use; then you can turn off Wi-Fi and it still works.
More image tools
Sprite sheet maker
A GIF or a set of pictures laid out as one PNG grid, with a JSON of every frame’s position and delay, or a sheet cut back into a GIF. It stays on this device.
GIF to WebP
Turn animated GIFs into animated WebP files that are far smaller, with their timing and looping. Converted on this device, never uploaded.
APNG to GIF
Turn APNG files into animated GIFs that chat apps and upload forms accept. Converted on this device, never uploaded.
HEIC to JPG
Turn iPhone and iPad photos into JPG or PNG files that open anywhere. Your photos never leave this device.