Updates to Chapter 10


GIF Images -- support for Animated GIFs, Circa Page 512

As of Version 2.0, the Netscape Navigator supports what are known as animated GIF images. The GIF format lets a single GIF file contain a sequence of images of the same height and width -- essentially the file can be an archive of images, stored one after the other. Of course, if the stored files aire subsequent frames of a short animation sequence, and you can display them one after the other .... viola! -- you have an animation. In fact, the GIF format allows you to specify: the time delay (in 100ths of a second) between subsequent frames; whether the animation should start automatically or should start upon user-selection of the image; and also how the frame should be treated after it has been displayed (should it cycle in a loop, or stop after the sequence is done). The latter is a special extension that is implemented by Netscape (The GIF format allows for such extensions).

Until Netscape 2.0 came along, all browsers ignored this capability -- if a browser encountered a GIF file containing multiple images it would usually just display the first or last picture in the sequence, and ignore the animation. Netscape 2.0, however, can recognize multi-frame GIFs, and will play them as an animation sequence.


NOTE -- Animated GIFs require an extra process thread (or three!) to run the animation process. This works fine on UNIX machines, or on PC/Macintoshes with sufficiently fast processors and lots of memory (more than 16 Mbytes). Users with slower machines will find that GIF animations will really bog down their computers. So -- don't get carried away with them!

Creating Animated GIFs

You will require special software to create an animate GIF sequence. In general, you prepare the animation as a collection of single GIF images, and then paste them together using a GIF animation tool. In general, you want the frames to be small, and as with all GIF images, you want to use the fewest colors possible -- this leaves colors for other images in your document, and reduces the amount of data in each animation frame. You will also need some special software if you want to make a looping (infinitely running) animation, as this is a special extension implemented by Netscape. Available software is discussed below.

Is it Hard?

No, not really -- it just takes some special software, and the time and effort to learn how to make the frames and link them together.

Inserting Animated GIFs in HTML Documents

This is easy -- you insert an animated GIF using our friend, the IMG element. For example, if your animated GIFs were in the file anim.gif, then the img tag would simply be
  <IMG SRC="anim.gif" ALT="animated button" HEIGHT=54 WIDTH=45">
Where I have been careful to specify the image height and width, as this will let the browser format the page even before the image/animation has been loaded.

Browsers that do not support the animated GIF format will usually display the first frame in the animation sequence, while others display the last -- there's nothing like consistency, is there? One way around this problem is to make the first and last frames identical -- this also works well if you want a looping sequence, since you need the first and last frames to be dentical (or nearly so) to make the animation loop smoothly.

Animated GIF Resources

There is a wonderful resource collection on animated GIFs, provided by Royal Frazier. This contains a detailed tutorial on the GIF97 and GIF89A file structures, tutorials on creating animated GIFs, lists of software to help you in this process, and a gallery of animated GIFs created by Royal and others. The URL for this reference is: http://user.aol.com/royalef/gifanim.htm, while a list of mirror sites is available at http://user.aol.com/royalef/mirrors.htm.

If you look down in this page you will find a Table of Contents listing this web site's contents. This contains a listing of platform-specific software, and is where you should go if searching for GIF animation software. The following is an abbreviated contents listing, for some of the more important sections:


The HTML Sourcebook -- 2Ed
© 1995, 1996 by Ian S. Graham
Page Last Updated: 9 April 1996