Choose a GIF, arrange its frames and export a PNG sheet with metadata. Your animation stays in this browser.
Built locally in your browser · Free · No watermark added
A frame atlas keeps the animation in one image
A GIF stores a sequence of timed frames; a sprite sheet places those frames on one larger canvas. The PNG sheet alone does not contain playback instructions. Keep its metadata beside it so an engine knows which rectangle belongs to each frame and how long to display it. This page extracts an existing animation; use the sprite sheet generator when your starting point is a collection of separate images.
Match columns and padding to the destination
More columns make the sheet wider and shorter. Padding leaves space between frames and can help when a renderer samples neighboring pixels, but it also enlarges the atlas. Scale affects every frame. Selecting every Nth frame deliberately reduces the number of exported frames; inspect the playback preview and the exported timing after sampling.
Use the metadata format your project expects
Generic JSON records each frame’s position, dimensions and duration. Phaser-compatible JSON Hash is intended for projects that load an atlas in that form. The generated CSS uses discrete keyframes at cumulative frame times so that padding and uneven frame delays do not become an equal-interval sweep. If you simplify it to a single steps(frameCount) declaration, variable delays will be lost. Keep the downloaded image name and path aligned with the CSS reference.
Transparency is preserved within PNG limits
The source GIF has binary transparency, so converting it to PNG does not recover soft edges that were never present. A sheet can also be too large for a browser canvas or game texture even when the GIF file is small. Reduce scale or sample fewer frames if the tool reports a limit. All processing happens locally; exported sprites are not uploaded to a public asset library.
How to use this gif to sprite sheet
- 1Choose the GIF to extract.
- 2Set columns, padding, scale and frame sampling.
- 3Generate the sheet and compare the playback preview.
- 4Download the PNG and matching metadata for your project.
Frequently asked questions
How do I convert a GIF to a sprite sheet?
Choose the GIF, set its grid and export a PNG sheet together with metadata. Keep both files because the image alone does not describe frame timing.
Will every GIF frame appear in the sheet?
With sampling set to every frame, each decoded source frame is included. Choosing every Nth frame intentionally exports fewer frames.
Can I use a GIF sprite sheet in Phaser?
Select the Phaser-compatible JSON Hash output and verify the atlas and animation setup in your project. The metadata format does not create your game’s animation code automatically.
Does CSS steps() preserve variable GIF delays?
A simple steps() animation uses equal intervals. This generator instead exports discrete positions at cumulative frame times. Keep that timing when adapting the snippet for your project.
Are transparent areas kept?
PNG can keep transparent source pixels. GIF only has binary transparency, so conversion cannot restore missing semitransparent edges.