GIF TO SPRITE SHEET · FREE · NO UPLOAD
GIF to Sprite Sheet
Drop an animated GIF and get a single PNG sprite sheet plus a JSON file describing every frame’s position, size and delay — the exact pair game engines and CSS animation pipelines ask for. Decoded frame-by-frame in your browser; the sheet is laid out on a canvas at native resolution.
Drop files here or
Processed locally in your browser — nothing is uploaded. Batch supported, zip download included.
0 uploads — verified locally 0 uploads
The 2026 state of GIF to Sprite Sheet
| Field | 2026 state |
|---|---|
| Frame extraction | Full GIF89a decode: LZW, per-frame delays, transparency, disposal methods |
| Layout options | Auto (nearest square) / 2 / 3 / 4 / 8 columns |
| Output pair | one |
| JSON schema | {frames:[{x,y,w,h,delay}], meta:{frameCount,cols,rows,sheetWidth,sheetHeight}} |
| Delay units | JSON delay in milliseconds (converted from GIF 1/100s ticks) |
| Static GIFs | Honest single-frame hint — sprite sheets need animation |
| Large GIFs | Sheet size = cols × frameW × rows × frameH; 100+ frame GIFs still fine up to canvas limits |
| Engine use | Slice by JSON rects or use as CSS steps() animation strip |
FAQ
What is a sprite sheet?
One image that packs every animation frame in a grid, plus metadata saying where each frame lives. Game engines (Phaser, Unity, Godot) and CSS steps() animations both consume this pair — one PNG, one JSON.
Why does the JSON matter?
The PNG alone doesn’t say where frames start or how long each lasts. The JSON lists every frame’s x/y/width/height and its delay in milliseconds, so your engine can slice and time the animation exactly as the original GIF played.
Which column count should I pick?
Auto (square-ish) is right for most engines. Use 1 column if you want a vertical filmstrip for CSS steps(), or match your engine’s preferred atlas shape. Frame order is row-major, left to right.
My GIF is static — why won’t it make a sheet?
A sprite sheet of one frame is just the image itself. For slicing a still image into tiles, use the split-image-into-tiles tool instead — this page tells you that instead of pretending.
Last updated: · Launch: GIF frame extraction → PNG sheet + JSON metadata, 5 layout modes · change history