GifWrench

Convert a GIF to a Sprite Sheet

Every frame is laid out on a grid in one PNG, with a JSON file listing each frame's position and duration.

Large dimensions or frame counts may exceed your browser’s memory even below the file-size limit.

How to convert a GIF to a sprite sheet

To turn a GIF into a sprite sheet, load it, choose the number of columns (0 = automatic), optional padding between frames, and press Make sprite sheet. You get two files:

  • PNG: all frames, full size, laid out left to right, top to bottom.
  • JSON: the position, size and duration of each frame, plus the grid layout.

Using the sprite sheet

  • Phaser: load the PNG and JSON as an atlas, or load the PNG as a spritesheet with the frame width and height from the JSON meta.
  • Godot: set the PNG as an AnimatedSprite2D sprite frames source and slice it with the columns and rows shown after export.
  • CSS: use the PNG as a background and step through frames with steps(n) animation.
  • Pixi.js / others: use the frame rectangles in the JSON.

Frame durations come from the original GIF, so variable timing is kept in the JSON even though a sheet has no timing of its own.

Need to slice a sprite sheet instead?

This tool goes from GIF to sheet. To go the other way, split a GIF into frames or start from the frames you already have.

Frequently asked questions

What JSON format does the sprite sheet use?

A TexturePacker-style "array" format with a frames list (x, y, w, h and duration in ms for each frame) and a meta block (image name, sheet size, frame size, columns, rows). Phaser can load it as an atlas; for other engines the frame width and height are all you need.

How many columns should I use?

Leave it at 0 for an automatic, roughly square grid. Use 1 column or a column count equal to the frame count when your engine expects a single row or column.

Is there a size limit?

Browsers cap canvas size (often 16,384 pixels per side). For long, large GIFs, keep every 2nd frame or resize the GIF first.

Related tools

Guides