GIF to PNG Sequence

Why Extract PNG Frames from a GIF?

The Graphics Interchange Format has been a web animation staple since 1987, and it remains one of the most widely shared animation formats today. But game engines and pixel art software rarely accept it as a direct import. Unity, Godot, Phaser, and GameMaker all require PNG sequences or sprite atlases — not animated GIFs. When you find a GIF character sprite, a looping walk cycle, or a free animation from OpenGameArt or itch.io, extracting its individual frames is the essential first step before the asset is usable in your project.

This tool does the work instantly: upload any animated GIF, and every frame is composited correctly, displayed as an individual PNG in the preview grid, and packaged into a ZIP download. No account required, no server upload — everything runs entirely in your browser using the HTML5 Canvas API.

How GIF Frame Compositing Works

GIF animation is more complex than a simple sequence of full-canvas images. Each frame can cover only a portion of the canvas, positioned at an x/y offset — a technique used to reduce file size by only encoding the pixels that changed. Each frame also carries a delay value in centiseconds (hundredths of a second) and a disposal method that tells the renderer what to do with the previous frame before drawing the next one.

The four disposal methods are: leave the previous frame in place (do not dispose), clear the previous frame region to the background color, restore the previous frame region to what was there before that frame was drawn, and unspecified (treated identically to do not dispose). Because of these compositing rules, naïvely reading each frame's raw pixel data often produces incorrect output — partial frames that rely on previous frame content appear as floating fragments. This tool processes the full compositing pipeline and handles all four disposal methods, so each exported PNG shows exactly what you would see at that moment in any GIF player.

Step-by-Step Guide

• Upload: Drag your GIF onto the upload area, or use the From Gallery / From Files buttons. The animated preview appears immediately so you can confirm the right file loaded.
• Check stats: Frame count, average FPS, canvas dimensions, and total animation duration appear in the panel after parsing.
• Preview frames: Every extracted frame appears in the grid below. Click any thumbnail to zoom in with a checkerboard background that makes transparent areas visible.
• Set a prefix: Change "frame" to your sprite's name — output files become hero_0000.png, hero_0001.png, and so on.
• Download: Click the button and receive a ZIP with all frames as individually named PNG files ready to import into your game engine or editor.

Game Development Use Cases

• Unity: Drop the extracted PNGs into your Assets folder. Set Texture Type to Sprite, use the Sprite Editor to slice, or import them directly into an Animation clip. The 4-digit zero-padded filenames (hero_0000.png) allow Unity to auto-detect sequences and create animation clips automatically.
• Godot 4: Create a SpriteFrames resource and add each PNG as a frame in an AnimatedSprite2D node. Hover over any thumbnail in the preview grid to see the original frame delay in milliseconds — enter those values directly in Godot's animation timeline to match the original timing.
• Aseprite: Open PNGs as a sequence via File → Import Sprite Sheet, or drag all frames into a new canvas as layers. Edit specific frames without touching the rest, then re-export as a new GIF or sprite sheet.
• Build a sprite atlas: After downloading the ZIP, use ORH Studio's Sprite Sheet Packer to combine the PNG sequence into a single texture atlas. This GIF → PNG sequence → sprite sheet pipeline is the standard workflow for preparing free internet assets for engine use.
• Reverse-engineering animation timing: The per-frame delay displayed in the thumbnail tooltips lets you study the original animator's timing decisions before re-implementing the animation in your engine's keyframe system.

Transparency and Color Limitations

GIF supports binary transparency: each pixel is either fully opaque or fully transparent, and only one color in the palette can be designated as the transparent index. This differs significantly from PNG's alpha channel, which supports 256 levels of opacity. The extracted PNG files accurately preserve GIF transparency — transparent GIF pixels become alpha = 0 in the PNG output. If your source GIF has a solid background color instead of transparency, that background will appear in the exported PNGs as-is.

GIF uses indexed color with a maximum of 256 colors per palette (each frame can carry its own local palette on top of the global one). For pixel art sprites this is rarely a limitation — 256 colors covers virtually all pixel art palettes. For photographic or gradient-heavy source material, you may notice color banding, but that banding was already present in the source GIF and is not introduced by the extraction process.

Frequently Asked Questions

Is there a frame or file size limit?

No server-side limit applies because no server is involved. All processing runs in your browser tab. GIFs with 100+ frames at large resolutions are handled fully, though very large files may take a few seconds to extract on low-end mobile hardware.

Does it work on mobile?

Yes. The tool is fully functional in mobile browsers. Use the From Files button to navigate your device's file system — mobile photo galleries sometimes filter GIF files out of the standard image picker, so the Files path is more reliable.

Why do some frames look like partial images?

That is the GIF compositing model at work. Frames that cover only a subregion of the canvas build on top of the previous frame's content. This tool handles all four disposal methods correctly, so exported PNGs should match exactly what a browser GIF player displays at each animation step.

What if my GIF has only one frame?

Single-frame (static) GIFs are extracted as one PNG. This is a convenient way to convert a GIF image to PNG format without installing any software.

What happens to my file?

Nothing is uploaded anywhere. The GIF bytes are read locally in your browser tab and never transmitted to any server. Closing or refreshing the tab discards everything.

Can I use the exported frames commercially?

The tool itself is free with no watermarks. The copyright of the extracted frames is determined entirely by the original GIF's license — check the source before using frames in a commercial project.

How does this complement the Sprite Animation Previewer?

They form a complementary pair: the Sprite Animation Previewer takes individual PNG frames and assembles them into a playable animation preview with GIF export. This tool does the opposite — it takes an animated GIF and gives you back the individual PNG frames. Together they form a complete round-trip workflow for working with sprite animations in any format.