GIF to Sprite Sheet

Related Tools

View all tools →
GIF Maker
Try free →
CSS Sprite Generator
Try free →
Sticker & Emote Maker
Try free →
Image Converter
Try free →

How to turn a GIF into a sprite sheet

  1. Upload the GIF. The tool shows the frame count, size and loop length and plays it next to the sheet.
  2. Set the layout: columns (0 picks a near-square grid), spacing between frames, and a whole-number scale for pixel art.
  3. Download the sheet as a PNG with a JSON file of frame positions and durations and a ready-made CSS animation, or every frame as its own PNG in a ZIP.

To go the other way, switch to Sprite sheet → GIF, upload a sheet, enter its columns and rows, how many frames to use and the delay, and download the GIF.

Full frames, not fragments

Most GIFs are stored as a first frame plus the rectangles that change, and each frame carries a disposal method that says what happens before the next one: leave it, clear that area to transparent, or put back what was there before. The tool decodes the file with gifuct-js and then replays every frame onto a canvas with its disposal method, the way a browser plays the animation, and copies the full canvas into the sheet.

What we tested

On October 14, 2026 we made test GIFs with Pillow, ran them through the tool in Chromium and compared the results with Pillow’s own decoding:

TestResult
GIF with disposal 1 (keep), 8 frames, mixed delays8 frames, 0 pixels differ from Pillow, delays match
GIF with disposal 2 (clear to transparent)8 frames, 0 pixels differ from Pillow, delays match
GIF with disposal 3 (restore previous)8 frames, 0 pixels differ from Pillow, delays match
CSS animation8 keyframes for 8 frames
Scale 3× (pixel art)frame 120x90, 0 pixels differ from a nearest-neighbour enlargement
Frames as PNGs (ZIP)8 files
Sheet back to GIF (4 × 2 grid, 80 ms)8 frames of 40x30, delays [80] ms, 0 pixels differ from the original GIF

The page fitted a 390 px phone screen with no errors.

Sources

Checked on .

Frequently Asked Questions

Why do some GIF-to-sprite-sheet tools give broken frames?+
GIF files often store only the part of each frame that changed, plus an instruction for what to do before the next frame (keep the image, clear the area, or restore the previous image). A tool that copies the stored patches gives you fragments. This tool replays those instructions the way a browser plays the GIF, so each cell holds the full frame; in our test every frame matched Pillow's composited frames pixel for pixel.
What is in the JSON file?+
The sheet size, frame size, columns, rows and scale, then one entry per frame with its x, y, width, height and duration in milliseconds. It is plain JSON that game engines and scripts can read; map the fields to your engine's format if it expects a specific one.
How does the CSS animation keep the GIF's timing?+
It writes one keyframe per frame at the moment that frame starts and uses steps(1, end), so each frame is held for its own duration, including GIFs whose frames have different delays. It also stops the animation for people who have asked for reduced motion.
Can I scale up pixel art?+
Yes: the scale setting multiplies the frame size by a whole number with nearest-neighbour scaling, so pixels stay crisp instead of blurring.
Why did my frame delay change slightly in the GIF?+
The GIF format stores delays in hundredths of a second, so a delay is rounded to the nearest 10 ms. The tool shows the stored value before you download.
Is anything uploaded?+
No. Decoding, the sheet, the GIF encoding and the ZIP all happen in your browser.

Built by Derek Giordano · Part of Ultimate Design Tools

Privacy Policy · Terms of Service

Related Articles

Image
How to Make a GIF Smaller (and Why Some Tools Make It Bigger)