A Complete Guide to Web Design

328 Chapter 18 – Animated GIFs

Optimizing Animated GIFs

Web Design in a Nutshell, eMatter Edition

is to build looping right into a file by repeating the frame sequence a number

of times; of course, this increases the file size and download time.

Interlaced

Like ordinary GIF89a graphics, animated GIFs can be set to be interlaced,

which causes them to display in a series of passes (starting blocky, finishing

clear). It is recommended that you leave the interlacing option set to “no” or

“off” because each frame is on the screen for a short amount of time.

Depth

This option allows you to limit the bit depth of the image to some number

less than 8 (the default for GIF). Bit depth and its effect on file size is

discussed in detail in Chapter 14,GIF Format. Note, if you select the Netscape

(6× 6 ×6) palette, you will need to keep the bit depth set to 8.

Dithering

Dithering is a way to simulate intermediate color shades. It should be used

with continuous-tone images.

Background Color

Regardless of what color you select in the background color option, Netscape

and Internet Explorer display the background color or image you specify in

your HTML page. So, this option doesn’t affect the display of the GIF in a

browser, only within the tool itself.

Starting Points

These settings are a good starting point for creating full-frame animations:

Color Palette:Global, adaptive palette

Interlacing: Off

Dithering: On for photographic images, Off for drawings with few colors

Image Size: Minimum Size

Background Color: Black

Looping: None or Forever

Transparency: Off

Disposal Method: Do Not Dispose

Optimizing Animated GIFs

As with any file served over the Web, it is important to keep animated GIFs as

small as possible. I recommend reading “Optimizing Animated GIFs,” an article

and tutorial by Andrew King that appeared in WebReference.com in 1997, and

from which many of the following tips were summarized (with permission). You

can find it athttp://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 “Mini-

mizing GIF File Sizes” in Chapter 14. These measures include:

• Eliminating unnecessary dithering


• Removing stray pixels from otherwise solid areas