How Web Animation Works

By: Tom Harris

Animated GIFs

One of the biggest innovations in the history of the Internet was the ability to integrate photographs and other illustrations with text on a web page. The illustrations come in the form of bitmap files. A bitmap file simply describes the color of each pixel in the image. To decrease the file size of these bitmap images, several different techniques are used to compress the image data. Typically, Web sites post these sorts of images as either JPEG files or GIF files.

Animation is just a series of still images shown in sequence, so the most obvious way to add animation to a Web site is to post a series of bitmap images that the user's browser displays in sequence. This sort of animation, called GIF animation, or GIF89, was the first Web animation to catch on, and it is still very popular today.


The main advantages of GIF animation are that it is incredibly simple to work with and it is automatically recognizable to most Web browsers. With a shareware program, such as GIF construction set for Windows or GifBuilder for Macintosh, all you have to do is provide the individual bitmap images that make up the frames of your animation. You then post the file and code the tag for the image, just as you would with an ordinary static GIF.

The disadvantage is that you have to keep the animation pretty simple to keep the file size down. After all, each frame is a full bitmap image. Four simple frames transmit very easily to most users, but when you get up to something like 20 frames, your file size could be too big. And you can't even accomplish very much with 20 frames -- the fluid animation we see in movies includes at least 24 still images every second -- so animated GIFs are fairly limited. To create a movie of any substantial length, you have to make pretty big jumps between each frame, which means the animation is not very fluid, as you can see in the example below.

The individual frames in an animated GIF.
The individual frames in an animated GIF.
The final animation.
The final animation.

This is an excellent way of illustrating a simple concept, or just adding some eye-catching decoration to your site; but Web designers and Web users found it to be wholly inadequate for communicating more complex ideas or adding a real sense of motion to Web sites. Furthermore, you can't add sound to a GIF animation.