animated .gifs

One of the strengths of the .gif image file format (it doesn't work with .jpg) is that you can animate them. This works just like film animation - a sequence of many "frames" are displayed in quick succession to get a "cartoon" effect, like this:

By far the easiest way to get an animation like this is to download one already on the Web. The Animation Factory, for instance, has a wide selection to choose from. Animated .gifs are clearly a simple way to add image changing to your document, and certainly make it more eye-catching. But as already may be apparent, if used gratuitously, they can quickly become very annoying, particularly if the user has no reason to scroll down and get the image off the page. So I suggest you use animated .gifs with discretion. I repeat a list of considerations given by Niederst in Web Design in a Nutshell, on page 322:

• Avoid more than one animation on a page.
• Use the animation to communicate something in a clever way (not just as gratuitous flashing lights).
• Avoid animation on text-heavy pages that might require concentration to read.
• Consider whether the extra bandwidth [download time] 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.

Note that both these last two points are only applicable if you design the animation yourself rather than download a prefabricated one off the Web. If you do this, you will not be able to change the timing. Note also that because animations are .gifs in the same way as any other .gif image, you should include an alt attribute. Animations can therefore also be used as links, or be subject to rollovers, as you can see on the example below.

The application Animation Shop is available on the university network - it is written by JASC, makers of Paint Shop Pro. A full explanation of its facilities is beyond the scope of this page, not to mention the abilities of its author, but it was the work of no more than a couple of minutes with the "Banner Wizard" facility in that program to create this animation, which could be used as a link (though at present isn't one):

"Animated text" like this can also be produced with the <marquee> tag. But the caveats above still apply. It's a reasonable attention-grabber but can quickly become annoying. Still, there's nothing to stop you doing something like this:

...where the rollover in the onclick event replaces the animation with an "ordinary" .gif that is simply one frame of the animation copied and pasted into a non-animated image.

All in all I think animations are unncessary gimmicks but it's not my business to decide for you which techniques you should and shouldn't know - well, not entirely anyway! There may be practical applications of the technique, however: perhaps on web pages aimed at children which have web-based games. Subtle animations on banners and titles can also be worth trying, if they are well-chosen. So now you know how to do it.

Back to the top

Back to the menu of other topics