322 Chapter 18 – Animated GIFsUsing Animated GIFs
Web Design in a Nutshell, eMatter EditionThe GIF animation consists of a number of images and a set of instructions that
specify the length of delay between frames, as well as other attributes like trans-
parency and palettes.Using Animated GIFs
Nowhere has GIF animation made a larger impact than in banner advertising. Ad
agencies aren’t stupid... they know that adding motion and flashing to a web
page is a sure-fire way to attract attention. And it’s true—adding animation is a
powerful way to catch a reader’s eye.
But beware that this can also work against you. Many users complain that anima-
tion istoodistracting, making it difficult to concentrate on the content of the page.
Although it adds a little “pizzazz” to the page, overall, too much animation can
actually spoil the user’s enjoyment of your page.
Use animated GIFs wisely. A few recommendations:- Avoid more than one animation on a page.
- Use the animation to communicate something in a clever way (not just as gra-
tuitous flashing lights). - Avoid animation on text-heavy pages that might require concentration to read.
- Consider whether the extra bandwidth to make a graphic “spin” is actually
adding value to your page. - Decide if your animation needs to loop continuously.
- Experiment with timing. Sometimes a long pause between loops can make an
animation less distracting.
Browser Support
Versions 2.0 and higher of both Netscape Navigator and Microsoft Internet
Explorer have some degree of support for GIF animation, with the implementa-
tion improving with each subsequent release. Still, there are a few specific aspects
of animation that prove to be particularly problematic for some early-version and
lesser-known browsers.
If your animation uses one of the following, you may want to do some cross-
browser, cross-platform testing:
Looping
Very early browsers do not support looping at all. More commonly, looping is
supported, but settings for a specific number of loops may be ignored. If you
specify the number of repetitions, be aware that some users will experience
nonstop looping instead. Internet Explorer versions 2 and 3 support only one-
loop animation.
Revert to Previous
This disposal method does not work on Netscape 2.0, 3.0, and the Mac
version of 4.0 (it treats it as “do not dispose.”) (See the “Disposal Methods”
section later in this chapter.) Revert to Previous is supported only by Internet
Explorer versions 3.0 and higher. Although it can result in slightly smaller file