Web Design in a Nutshell, 2nd Edition

Optimizing Animated GIFs

As with any file served over the Web, it is important to keep animated GIFs as small as possible. I highly recommend reading “Optimizing Animated GIFs,” an article and tutorial by Andrew King in WebReference.com, from which many of the following tips were summarized (with permission). You can find it at http://www.webreference.com/dev/gifanim/index.html.

Image Compression

Start by applying the same file-size reduction tactics used on regular, static GIF files to the images in your animation frames. For more information, see “Minimizing GIF File Sizes” in Chapter 19. These measures include:

• Reducing the number of colors.

• Reducing the bit depth.

• Eliminating unnecessary dithering.

• Applying the “loss” feature available in Adobe ImageReady and Macromedia Fireworks. ImageReady 3 allows you to do weighted optimization where loss can be applied more agressively to selected areas of the image. If your tool does not include a loss function, you can manually remove stray pixels from otherwise solid areas.

Optimizing Methods

In addition to the standard image-compressing methods, GIF animation tools optimize animations by eliminating the repetition of pixels in unchanging image areas. Only the pixels that change are recorded for each frame. Different tools use different optimizing methods, which are not equally efficient. These methods, in order from least to most compression, include:

Minimum bounding rectangle

In this method, the changed portion of the image is saved, ...