by Mark Larmand

Well for starters, things are usually moving around in the picture. That would be your first clue. But more exactly, it's a Gif image. Not a Jpg, not a Png, not a Tiff... but a Gif. That's important to note because, at the present time, only the Gif image format is the most browser-friendly and compatible graphics format that can be used for Web animations. Why? Heck, I'm not exactly sure to be honest. It may just have something to do with the fact that the Gif image format is one of the oldest to be used on the Internet, and it's been developed the most over the other formats to include things like transparency and interlacing.
August 17, 1999

You should also know that most animation programs will let you 'import' a lot of other image formats (Jpg, Png, Bmp, Tiff, etc.). It's only when you're ready to 'export' the finished animation that it gets converted to the Gif format by the program. That's why it's important to pay close attention to the types and amount of colours used when creating the separate images for your animation. Otherwise, you might end up with a horrid-looking animation, or one that's too large in file size.

Nowadays Jpgs and Pngs also support interlacing, and the Png format is catching up very fast to the versatility and compatibility of the Gif in all aspects. It shouldn't be too long now before it slides in and takes over for the tired ol' Gif format.

Another (questionable) answer might be that the Gif format can store its own selective palette information within its binary data, and can produce good-quality results by using a Lossless type of compression that can reduce file size, while maintaining image integrity.

Whatever the reason, it's of no real concern to us here. We want to dance! So let's get on with it!

Back to our original question then: What makes an animated Gif animated?

To begin with, all Gif animations are made from a compilation of separate images. These individual images are usually created in either a raster or vector graphics program, and then, using a Gif animation/compiling program, put into a specific sequential order - exactly how a movie is made, but a lot more primitive.

Have a look at the image below. Here you'll see what is meant by 'a specific sequential order'. I've created 4 separate images that are only slightly different. For the most part, the majority of pixels in each 'frame' look the same. They will be compiled together to end up being only one image file, that will progressively show each image in turn until they've all been shown. Then, depending on whether the animation is set to 'loop' over (repeat), it will either stop on the last image in the sequence or continue from the beginning again and repeat itself endlessly (or until the user hits the STOP! button on their browser).

And that's another thing... you can think of Gif animations in terms of 'frames' or 'cells'. Just like the individual frame cells that you see when looking at a roll of film that a movie is created on. They are in essence the same thing. Only ours is created with binary data, not burned onto celluloid.

Here's a screen shot taken from Macromedia Flash 3. It will show you in a linear fashion the concept behind Gif animations.

This is the animation control GUI of the program, and it's very easy to understand and learn. The layout of each separate frame/cell in the animation (they call it a 'Scene', and multiple scenes make a 'Movie'), is quite logically designed, and is based on the small blocked spaces to the right of the layers. Along the top is where the frames/cells are numbered. Note that the program uses a 'layers' concept to allow the user to 'overlay' multiple animated sequences (per layer) and combine them into one complex Movie. That's a very strong capability to have and in the hands of the right person, can yield some extraordinary productions, such as many of the Flash Movie styled sites that are becoming more common now. Lots of other programs also use the 'layer' concept because it's so easy and familiar to understand.

Thought: A Flash Movie is nothing more or less than a glorified gif animation, but with a multi-million dollar budget, instead of a couple of grand for an independent production.

After thought: If you were to create 1000 frames for an animated Gif, each frame being only a fraction different than the previous one, you too could make a very smooth, good quality 'mini-movie', and still come in under budget. But the file size would be out-of-this-world! And quite unsuitable for the status quo Web page. But it can be done, if you have the time and patience.

Animations do not have to be as simplistic as the above example. There can be a lot of movement in them if you want a more complex effect. But beware the file size of your finished product. Remember that the more colours (including combinations or shades) you use, the larger the end file size will be. So one can see by that fact just how tough it might be to create an effective, dynamic, and entertaining animation that doesn't take forever to download and render in the user's browser. That part of the 'art' will come with practice though. Just be aware of that fact as you learn and you'll do fine.

Understanding Some of Your Options

Next up is what we can do to alter the way our animation behaves, and affect its colour attributes. Most decent animation programs these days will give you fairly similar types of options here, which usually include these:

[selection of colour palette/optimization]

• Global Optimized
  One large palette for the entire animation, that uses only the best colours contained within all the separate images (most useful/practical choice).
  
  
• Optimized Per Frame
  Same as above, except each frame of the animation will have its own specific palette, based on its unique collection of colours (not used much due to larger file sizes, but will yield the best looking results).
  
  
• Global Web-Safe
  The same as global optimized, except this option will use the 216-colour Web-safe palette as a base palette to draw its colours from (used more for simple animations with few colours, and is not suitable for dithering).

[individual frame speed/duration]

• frame speed is based on duration in 100s of a second; i.e. 5/100s = 1/5th of a second; 50/100s = 1/2 a second; 500 = 5 seconds; etc...

[further optimization & adjustments]

• You can choose to make any frame in the sequence either a Background for the animation, or have it Overlay onto the previous frames, for continuous movement and the building up of the animations complexity, thus creating the illusion of more movement and increasing pixel depth. Which, by the way, increases file size. It's all relative.

Let's continue by examining a few animation examples, to see what's gone into them.

This article is in four parts:

1. Introduction
2. What makes an animated Gif, animated?
3. Behind The Scenes
4. Organisation and Efficiency