BGZero
Auto RemoveManual RemoveBatch Remove
Game Assets
Blog
EN中文
Sign In
BG ZERO
All processing runs locally in your browser · No data uploaded · 100% private
ToolsChange Image Background ColorProduct Photo White BackgroundID Photo Background ChangerPassport Photo Background ChangerWebP Background RemoverTransparent PNG MakerBatch Background Remover
Game Asset ToolsGIF to Sprite SheetSprite Sheet MakerSprite Sheet CutterPixel Art UpscalerImage to Pixel Art
BGZero

AI-powered background removal tool
Runs locally in browser, zero data upload

Open Source Licenses

  • Default engineAGPL-3.0
  • Transformers.jsCC BY-NC 4.0
  • rembg-webMIT
Privacy PolicyTerms of ServiceOpen Source LicensesAccessibilityDMCAContactSource Code (AGPL-3.0)Report Abuse
© 2026 BG Zero. Released under AGPL-3.0.粤ICP备2026016654号-2Made with care · Local first
← Back to Tutorials
convert GIF to sprite sheetPublished August 16, 2026Updated August 16, 202624 min read

How to Convert a GIF to a Sprite Sheet

A practical workflow for extracting GIF frames, arranging them in a sprite sheet, checking transparency, and importing the result into a game project.

Animated GIFs are convenient for sharing a looping preview, but most game engines do not use a GIF as the source of a frame-by-frame character animation. They work more predictably with separate textures or a sprite sheet: one PNG containing every animation frame in a known grid.

Converting the file is more than taking screenshots. A GIF may store only the pixels that changed since the previous frame, may clear part of the canvas between frames, and may use a transparent background. A correct converter must reconstruct the visible frame sequence before arranging it in a sheet.

This guide explains how to convert a GIF to a sprite sheet, choose a layout that is easy to slice, and verify the result before it reaches Unity, Godot, or another engine.

Quick path If you already have an animated GIF, open the converter, choose the number of columns and padding, generate the sheet, and download the PNG. Everything is processed locally in your browser.

What changes when a GIF becomes a sprite sheet?

A GIF and a sprite sheet both contain a sequence of images, but they store different information.

PropertyAnimated GIFPNG sprite sheet
Frame imagesStored as an animation sequenceArranged as cells on one canvas
Frame timingStored per frameNot stored in the PNG
Loop settingCan be embeddedControlled by the game engine
TransparencySupported, with GIF limitationsPreserved as PNG alpha
LayoutHidden inside the animationVisible rows and columns

Six GIF animation frames arranged into a three-column sprite sheet

The exported sheet preserves the visual order of the selected frames. It does not preserve the GIF's frame delays or loop count. Record the playback speed separately if timing matters. For a GIF with irregular delays, inspect the original animation and decide whether the game animation needs one constant frame rate or duplicated frames to approximate pauses.

Before you convert the GIF

Start with the cleanest source available. A small preview GIF that was scaled, compressed, or color-reduced for a chat app may already have lost edge detail. If you also have the original PNG frames, use the sprite sheet maker instead; it avoids decoding an already optimized GIF.

Check four things before conversion:

  1. The GIF actually contains two or more frames.
  2. The canvas dimensions match the size you want for each sprite cell.
  3. The background is transparent if the sprite needs transparency.
  4. The frame count is reasonable for a single texture.

The online converter accepts animated GIF files up to 25 MB and up to 300 decoded frames. Browser memory also depends on frame dimensions and the final canvas. A 128×128 animation with 60 frames is modest; a 2,000×2,000 animation with hundreds of frames is not, even when its compressed file is small.

Step 1: Upload and let the frames decode

Open the GIF to Sprite Sheet Converter and select the GIF. Decoding happens in the browser, so the source does not need to be uploaded to a remote processing queue.

During decoding, the tool reconstructs complete visible frames. This matters because GIF files can contain partial image rectangles rather than a full canvas for every step. Disposal instructions can tell a decoder to keep the previous pixels, restore the background, or restore an earlier state. Simply extracting the stored rectangles would produce missing pixels, trails, or transparent holes. The converter composites them into the frame a viewer would actually see.

If the file is rejected, do not immediately convert it to a larger format. First check its file size, pixel dimensions, and frame count. Trimming unused frames or resizing the animation at the source usually gives a better result than forcing an oversized decode.

Step 2: Choose columns for a sliceable layout

Columns determine how the frames wrap into rows. With 24 frames and 6 columns, the result has 4 rows. With 8 columns, it has 3 rows. Neither layout changes frame order: reading left to right, then top to bottom, still follows the GIF sequence.

A useful choice depends on the destination:

  • Use one row when the animation is short and your engine or pipeline prefers horizontal strips.
  • Use a near-square grid to reduce extremely wide or tall textures.
  • Use a column count that divides the frame count when you want every row full.
  • Use separate sheets when one file contains unrelated animations such as idle, run, attack, and hit.

Do not choose columns only by appearance. Estimate the final dimensions. If each frame is 256×256, a 10-column layout is already at least 2,560 pixels wide before padding. The converter shows the expected output size and asks for confirmation when the generated canvas is larger than 8,192 pixels in either direction. That warning is a decision point, not proof that the browser or engine can handle the texture comfortably.

Step 3: Set padding and background

Padding adds empty space around and between cells. Zero padding produces a compact grid. A small gap can make manual inspection easier and can help workflows that require separation between neighboring sprites, but the same value must be entered when the sheet is sliced.

For most pixel-art sheets, start with zero padding. For filtered or mipmapped textures, edge extrusion is more useful than empty padding, but this converter does not generate extruded borders. Configure the engine's import settings carefully or add extrusion in a dedicated texture-packing step.

Choose a transparent background when sprites need alpha. A solid background permanently fills the empty canvas around frames and is suitable only when that color belongs in the final art. If the GIF itself has a solid backdrop that should be removed, conversion will not identify and erase it automatically. Process the frames or sheet with a background-removal workflow after deciding whether automatic or manual cleanup is appropriate.

Step 4: Sample long animations only when it is intentional

The “keep every Nth frame” control reduces the number of exported frames. Keeping every second frame turns a 60-frame sequence into 30 selected frames; keeping every third frame produces 20.

Sampling can make a large reference animation manageable, but it changes motion. Fast actions may lose key poses, and a loop may develop a visible jump. Compare the sampled sheet with the original GIF. If an important anticipation, contact, or recovery pose disappears, keep more frames or remove frames manually from the source sequence.

Sampling does not automatically adjust playback timing. If you keep half the frames but use the old frame duration, the animation plays roughly twice as fast. To preserve the approximate total duration, increase the duration of the remaining frames in the engine.

Step 5: Generate and inspect the PNG

Generate the sheet and review the preview before downloading. Use this checklist:

  • The first and last frames are the expected poses.
  • No frame contains a trail from an earlier frame.
  • Transparent areas show the checkerboard rather than a baked color.
  • Every cell has the same dimensions.
  • Padding is consistent on all sides.
  • The predicted dimensions match the downloaded PNG.

Zoom in with nearest-neighbor display when checking pixel art. A smooth browser preview can make crisp pixels look soft even when the file is correct. Conversely, a checkerboard preview can hide faint semi-transparent pixels, so also inspect the file over both light and dark backgrounds.

The downloaded filename identifies the result as a sprite sheet. Keep the original GIF nearby until the import is verified because the PNG alone cannot tell you the original delays.

Importing the sheet into Unity or Godot

In Unity, import the PNG as a sprite texture, switch the sprite mode to a multiple-sprite workflow, and slice it using the exact cell size, offset, and padding used during conversion. For pixel art, disable filtering that blurs texels, avoid lossy texture compression, and confirm pixels per unit according to the project scale.

In Godot, a Sprite2D or AnimatedSprite2D workflow can divide a regular sheet by horizontal and vertical frame counts. Set those counts to the actual columns and rows, then build the animation in frame order. If the last row is not full, do not treat blank cells as animation frames.

Other engines use different names—frame width, tile size, region, grid, or atlas—but the calculation is the same. The first frame starts after the outer padding, each next frame advances by frame width plus padding, and rows advance by frame height plus padding.

Common conversion problems

The sheet shows ghost trails

Ghost trails usually indicate incorrect GIF disposal handling. Confirm the source looks correct in a standards-compliant GIF viewer, then reconvert. If the trail exists only in the exported sheet, use a converter that reconstructs partial frames and disposal modes rather than extracting raw rectangles.

The output is too wide or taller than 8,192 pixels

Reduce the column count to make the sheet narrower, increase it to reduce height, sample fewer frames, or resize the source animation. The best answer is not always “continue anyway.” Many engines and mobile GPUs impose texture limits or incur high memory cost long before a browser hard limit is reached. Splitting a long sequence into several animation-specific sheets is often cleaner.

Transparency has a colored fringe

GIF transparency is limited and color reduction can leave matte-colored edge pixels. View the result over the actual game background. If the halo is present in the source, clean the edges after extraction or return to the original full-color frames.

The animation speed is wrong

The PNG contains no timing data. Set the frame rate or individual frame durations in the engine. When the source uses variable delays, document them before conversion or approximate them with repeated frames.

A repeatable game-asset workflow

For a single animation, convert the GIF, inspect the sheet, import it, and test the loop in-engine. For a larger character set, keep each action in its own named file, use consistent frame dimensions, and record frame rate next to the art source.

If you later need individual PNG files, use the sprite sheet cutter with the same grid measurements. If the frames need to be rearranged, split the sheet first and then rebuild it with the maker. The game asset tools hub connects the converters so each step remains explicit.

Convert your GIF to a sprite sheet

FAQ

Does a sprite sheet keep the GIF frame rate?

No. A PNG stores pixels, not animation delays or loop settings. Configure timing in the game engine and keep a note of variable delays from the source GIF.

Can I convert a transparent GIF?

Yes. Transparent areas can remain transparent in the PNG sheet. Check edge pixels because GIF color and transparency limitations may already have introduced a fringe.

Why are some GIF frames incomplete when extracted elsewhere?

Some GIFs store only a changed rectangle and rely on previous frames plus disposal instructions. A correct converter composites those updates into complete visible frames.

How many columns should a sprite sheet use?

Use a number that creates manageable texture dimensions and a grid your engine can slice reliably. A divisor of the frame count creates full rows, but it is not mandatory.

Can I turn the sprite sheet back into a GIF here?

The current tool converts GIF to PNG sprite sheet only. It does not perform the reverse conversion or store timing metadata.

Related guides

split sprite sheet into framesHow to Split a Sprite Sheet into Individual Framesmake sprite sheet from imagesHow to Make a Sprite Sheet from Multiple Imagesupscale pixel art without blurHow to Upscale Pixel Art Without Blur
← Back to Tutorials