Step 1
Choose an animated GIF
The file is read as an ArrayBuffer on your device. gifuct-js parses the logical screen, frame patches, transparency, timing, and disposal instructions without sending the file to a server.
Client-side gif to sprite sheet converter
The upload controls, canvas preview, grid settings, PNG or GIF encoder, metadata, and download actions hydrate in the browser. Large files stay on this device: nothing leaves your browser.
GIF frames in · sprite sheet PNG out · no upload
GIF to Sprite Sheet Converter
Upload an animated GIF, decode its complete frames in your browser, arrange them in a clean grid, and download a PNG sprite sheet plus copyable frame metadata. Nothing leaves your browser.
- Handles partial GIF frame patches and disposal methods before layout
- Choose columns, padding, and gap while rows calculate automatically
- Exports a real RGBA PNG with columns, rows, frame size, and frame count
How to use the gif to sprite sheet converter
Step 2
Rebuild complete frames
Many GIFs store only the pixels that changed. The converter composites each patch onto the previous canvas and applies restore-to-background or restore-to-previous disposal before making the next frame.
Step 3
Set the grid and export
Pick a column count plus optional padding and gaps. The tool calculates rows, renders every full frame into the sheet, and downloads a transparent PNG. The metadata panel records the exact layout.
How GIF frames become a sprite sheet
A GIF is not always a stack of full-size pictures. Correct conversion depends on reconstructing the animation timeline before packing pixels into a grid.
Frame patches and disposal
GIF frames can be smaller rectangles positioned inside a larger logical screen. Transparent pixels in a patch mean “leave the existing canvas alone,” not necessarily “erase this pixel.”
Disposal method 2 clears the previous frame rectangle before the next frame. Disposal method 3 restores the canvas state from before that frame. Ignoring those rules creates trails, duplicated limbs, or dirty backgrounds in the exported sheet.
Grid math
Rows equal frame count divided by columns, rounded up. With frame width W, frame height H, gap G, padding P, columns C, and rows R, sheet width is 2P + C×W + (C−1)×G; height uses the same formula with R and H.
Empty cells can appear only at the end of the final row. They stay transparent, which makes the PNG safe to import into engines that use alpha.
Timing metadata
The PNG itself does not store animation timing. This tool reports each decoded delay separately and includes the frame count and geometry so you can rebuild the animation in CSS, a game engine, or an atlas descriptor.
GIF timing is stored in hundredths of a second, so some requested delays are rounded by the original encoder or clamped by players. The visual order is preserved even when timing granularity is coarse.
Measured fixture output
The automated fixture uses a real 197-byte, four-frame GIF at 4×4 pixels per frame. At 2 columns with 1-pixel padding and a 1-pixel gap, the engine produces an 11×11 RGBA sheet.
That fixture exports as a real 132-byte PNG through the same PNG encoder used by the page. These figures are regression-tested; they describe the fixture, not a promise about the size of every GIF or PNG.
Common mistakes
- Treating every decoded GIF patch as a complete frame, which leaves missing pixels.
- Using a column count larger than the frame count and expecting extra animation frames.
- Adding gaps but forgetting to configure the same spacing in the game engine importer.
- Assuming a sprite sheet PNG contains FPS or per-frame timing; keep the reported metadata.
GIF to sprite sheet FAQ
How do I convert a GIF to a sprite sheet?
Upload the GIF, choose the number of columns, then download the generated PNG. The tool decodes and composites every GIF frame locally before arranging complete frames into the grid.
Does this GIF to sprite sheet converter upload my file?
No. The GIF is read, decoded, composited, and encoded entirely in your browser. Nothing leaves your browser, which is especially useful for large or private game assets.
Why does a GIF frame need compositing?
GIFs often store only a changed rectangle instead of a full image. Compositing applies that patch to the previous canvas and follows disposal rules so each exported sprite is visually complete.
Can the sprite sheet keep a transparent background?
Yes. Transparent areas remain alpha pixels in the RGBA sheet and in the exported PNG. A GIF still has only one-bit transparency, so it cannot preserve partial alpha that was never present in the source.
How should I choose the number of columns?
Use a compact grid for asset browsing or match the row length expected by your engine. Rows calculate automatically, and the final row may contain transparent unused cells.
Does the PNG contain the original GIF frame delays?
No. PNG sprite sheets are static images. The tool displays decoded timing separately so you can copy it into an atlas, animation controller, or stylesheet.
What happens with very large GIF files?
Large files stay local, but decoding all complete frames can use substantial memory because each frame needs width × height × 4 bytes before export. Close other heavy tabs and use a smaller source when the browser is memory constrained.