Animated GIFs Made Easy

Animation Breakdown

What makes an animated Gif, animated?

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? I'm not exactly sure. 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.

NOTE: For reference sake you should also know that most animation programs will let you 'import' a lot of other image formats; i.e. 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 colour used in the creation of the separate images for your animation. Otherwise, you might end up with a horrid looking animation, or one with a file size blowout.

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 (dubious) answer might be that the Gif format can store its own selective palette information within its binary data, and can produce good quality results using a lossless type of compression that can reduce file size, while maintaining image integrity. Hmm... just a thought ;-)

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?

Ok, 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. It's done in the same way that a movie is made, only it's a lot more primitive.

Have a look at the image below. Here you'll see what's 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 into one image file, which will progressively show each image in turn until they've all been displayed. Then, depending on whether the animation is set to 'loop' over (repeat) or not, 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 on which a movie is created. They are, in essence, the same thing, except that ours is created with binary data, not burned onto celluloid :)

Here's a screen shot taken from Macromedia Flash®. This image demonstrates the raw structural concept of how animated Gifs are constructed.

These layers and time tracks are the animation controls of the Flash interface, and they're very easy to understand and learn. The layout of each separate frame or 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 or 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, and it can yield some extraordinary results, such as many of the Flash Movie-styled sites that are more common now. Lots of other programs also use the 'layer' concept because it's so familiar, and easy 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 average Web page. But it can be done, if you have the time and patience.

Animations, by the way, don't have to be as simplistic as the above example. There can be a lot of movement in them if you want or need 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 users 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.

Understand 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. They usually include:

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 that 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 215 Web safe palette as a base palette from which to draw its colours (used more for simple animations with few colours, and is not suitable for dithering)

Individual frame speed/duration

...whereby shorter frame durations produce a faster animation. Frame speed is based on duration in 100ths 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 animation's complexity. This creates the illusion of more movement and increasing pixel depth, which, by-the-way, increases file size. It's all relative.

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