Minimizing Color Palettes

Optimizing Animated GIFs

Minimizing the color palette is a good and often overlooked way to reduce the file size of any type of GIF. GIF file size is directly related to bit depth, and decreases dramatically when you reduce by two bits or more. Think powers of two - if a palette is just above a power of two, say 66 colors, and you reduce it to 64, the file size will drop. This is due to how LZW, GIF's compression algorithm, encodes its data. The more potential colors a pixel can have (read size of global color palette), the larger the pixel's initial code size (in bits) and the larger the file (see the LZW section for details). Animated GIFs can have one global palette or multiple local palettes attached to each image. Unless you have widely changing colors from frame to frame, it's a good idea to stick with an optimized global palette.

When you use local palettes, Netscape 3 and below has a bug that causes a "flicker" effect. Netscape loads the local palette for the next image while the current image is still displayed. If they don't use a majority of the same colors, you'll see a flicker when the image remaps. To avoid this, you can either use BoxTop's GIFMation 1.0 (if you can find it), which automatically creates a hybrid palette that contains the local palettes of the two frames or create an optimized global palette. You can do this by hand or use a program that creates optimized global palettes automatically: GIFMation, HVS ColorGIF, Ulead's GIF Animator, GIF Wizard, or DeBabelizer.

SuperPalette

DeBabelizer goes a step further, and can automatically create a SuperPalette (TM) from a series of images. The SuperPalette is a proprietary file format by Equilibrium that polls colors in a series of files and uses the most common colors to create an optimum global palette. The neat thing about Debab's SuperPalette is that it can dynamically regenerate itself after you add more images and palettes, giving you the optimum global palette every time. Note that Netscape claims this local palette remapping bug was fixed in version 4.0.

I hand-tuned my palette with DeBabelizer using the most colorful frame as a foundation, removing and merging unused and close colors, and using these same colors for my lettering. From my full color Photoshop file, I trimmed my palette down to 22 colors, but in retrospect a simpler ice pattern would have given us better compression for the first frame.

Nondithering Colors

There is a 216-color palette that does not dither on 8-bit Macs and PCs. (see Optimizing Web Graphics for details). It's a good idea to use these colors in your animations, but this isn't always possible. Since our penguin animation has both continuous-tone and flat areas we used a hybrid approach. For the flat sky, water, and penguin we chose colors from the nondithering palette and reduced the image in DeBabelizer, which doesn't shift colors as Photoshop can.