23.6. 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.
23.6.1. 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, "GIF Format". These measures
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.
23.6.2. 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
- Minimum bounding rectangle
In this method, the changed portion of the image is saved, but it is
always saved in the smallest rectangular area necessary to contain
the changed pixels.
- Frame differencing
In frame differencing, only the individual
pixels that change are stored for each frame. This is a more
efficient method than Minimum Bounding Rectangle, which includes a
lot of unnecessary pixel information to make up the rectangle. Of the
tools listed above, only GIFmation and ImageReady 3 use the frame
differencing method for optimization. In ImageReady, be sure to
select the "Transparency" option in the optimization
dialog box to turn on frame differencing.
LZW interframe optimization
This optimization method uses the LZW compression scheme to minimize
the frequency of changes in pixel patterns between frames. This
compression method, when used in conjunction with frame difference,
is capable of producing the smallest possible file sizes. Macromedia
Fireworks 3, SuperGIF 1.0, and WebPainter 3 all take advantage of LZW
compression for animations.
Copyright © 2002 O'Reilly & Associates. All rights reserved.