GIF to Sprite Sheet: Columns, Spacing and Timing That Matter

Try the GIF to sprite sheet tool.

The texture looks correct, but the animation samples the wrong tile or plays too fast. A PNG alone does not tell your runtime where each frame starts or how long it lasts.

When converting GIF to sprite sheet, treat layout and timing as part of the export.

Choose a predictable grid

A sprite sheet generator arranges animation frames into one texture. GIFDesk uses the decoded GIF sequence; it is not a general texture-atlas packer for unrelated assets of different sizes.

Set columns and tile dimensions to match your animation workflow. The tool places frames in row order and uses the requested tile width and height.

For a hypothetical 12-frame animation, four columns make three rows. With 64 × 64 tiles and 2 pixels between tiles, the sheet is 262 × 196 pixels. That example includes internal gaps, not an extra outside border.

Leave the right gap

Spacing changes the distance between neighboring tiles. Your runtime's coordinates need to account for it; dividing the sheet width by the number of columns is not sufficient when gaps exist.

Tile dimensions that differ from the source aspect ratio can change the frame's proportions. Preview the sheet before assuming the result matches the original shape.

Keep frame durations

Download the JSON alongside the PNG. It contains tile coordinates and frame delays, so your own runtime can preserve uneven timing.

If you need separate images instead of one grid, extract PNG frames. Neither export automatically creates an engine-specific animation asset; you still need to connect the output to your playback code.

The last row is where assumptions often break

Imagine ten frames arranged in four columns. The sheet needs three rows, but the last row contains only two frames. A runtime that blindly plays every grid position can sample empty space after the real sequence ends. The number of grid cells is not necessarily the number of animation frames.

Use the exported frame entries to decide what to play. Each entry gives the actual tile position, so you do not have to infer the sequence from the texture's overall dimensions. This is especially helpful after excluding frames, when the exported animation may contain fewer images than the original.

Spacing is not edge extrusion

A gap separates neighboring tiles, but it does not copy each tile's edge pixels into that gap. The tool exposes spacing between tiles; it does not promise texture extrusion or engine-specific anti-bleeding behavior. If your renderer uses filtering or mipmaps, test how it samples near tile boundaries rather than assuming any spacing value solves every artifact.

The correct sampling settings depend on your runtime and artwork. Pixel art may call for a different display treatment from a smoothly scaled effect. The export provides the sheet and coordinates; your application still chooses texture filtering, scaling and playback behavior.

Likewise, there is no extra outside border included in the layout example above. If an importer expects outer padding, account for that expectation separately. A mismatch in padding conventions can shift every sampled frame even when the sheet looks perfectly regular to a person.

Validate one tile before wiring the entire animation

Start by displaying the first exported tile using its JSON coordinates. Then try a tile from another row and one from the partially filled final row. This checks both horizontal and vertical placement before timing becomes another variable.

Next, use the recorded frame durations if your animation system accepts unequal delays. A fixed frame rate can be a deliberate simplification, but it changes the rhythm of an animation with longer holds. Verify that decision visually rather than treating a correct texture as proof of correct playback.

Finally, inspect the subject's proportions. The tool draws into the requested tile dimensions, so choosing a square tile for a wide source can distort it. Match the aspect ratio when shape matters.

Author disclosure: This tutorial is published by the GIFDesk team. The screenshot shows the tool processing an existing reaction GIF; it is not a claim of ownership of the source artwork. Drafting assistance was used, and examples described as hypothetical are not user measurements.