GIF Frame Extractor & Builder

What the gIF Frame Extractor & Builder does

This tool works in both directions, and both halves are unusual in a browser because GIF is a compressed format that browsers can display but not take apart. The decoder and encoder here were written specifically for this site.

Extracting parses the GIF structure, LZW-decompresses each frame, de-interlaces where necessary, and composites frames according to their disposal method — which matters because most GIFs store only the pixels that changed since the previous frame. Naively rendering each frame in isolation gives you a set of fragments; compositing correctly gives you the complete picture at each moment, which is what you actually want. Each frame's own delay is shown, since GIFs frequently vary the timing rather than running at a constant rate.

Building goes the other way. Every source image is drawn to a canvas at your chosen width, then all frames are analysed together to produce a single shared colour palette using median-cut quantisation. That shared palette is important: giving each frame its own would produce visible colour shifts as the animation plays. The frames are then LZW-compressed into a standard GIF89a with a looping extension.

The colour limit is the main quality-versus-size control. GIF supports at most 256 colours in a palette, which is why photographs animate badly and flat graphics animate well. Dropping to 64 colours can halve the file with little visible difference on a screen recording or a diagram, and will produce obvious banding on a sunset.

Ping-pong mode appends the frames in reverse, minus the endpoints, so a short sequence plays out and back without a jarring jump at the loop point.

How to use it

1. To extract: drop an animated GIF in and every frame appears, with its individual delay. Click one to save it, or take them all as a ZIP.
2. To build: switch tabs, select your images in order, and set the frame delay.
3. Lower the colour count if the file is too large — flat graphics tolerate this far better than photographs.
4. Press Build GIF. The animation previews in the page and downloads at the same time.

A worked example

A six-frame screen recording exported as PNGs, assembled into a GIF at 400 pixels wide:

The pattern is worth internalising: a screen recording of an interface has few distinct colours to begin with, so cutting the palette costs almost nothing until you go very low. Run the same test on a photograph and the 64-colour version would be unusable. The other big lever is width — halving it quarters the pixel count and roughly quarters the file.

Frequently asked questions