Animated GIFs Made Easy

Organization and Efficiency

As you've seen in abundance around the Internet, animations can come in many shapes and forms, most of which are simple rotating banner ads. Other forms are smaller product box shots that rotate through an image list. And still others are simple animated graphics used to make certain sections of a page stand out more obviously to the viewer. All these forms of animation have their merit, and all can be used quite effectively.

Banner Ads

For banners, the industry standard size is now 468 by 60 pixels. Because of their size, they require that you pay particular attention to optimization. A good banner design outline might include things such as:

• A good design and layout of the information contained in the ad(s). This will help you keep the number of 'pages' needed and used in the banner to a minimum; thus keeping its overall file size down.
• A small, Global Web safe colour palette, using no more than 4 to 5 colours. This is especially important if the rotating banner animation contains 3 to 5 individual one-page ads. If they're all assigned the same Global palette, the file size will be more easily optimized. There's usually a small trade off here in image quality, by the way. It's a small price to pay though.
• Using as little image dithering and gradients as possible. Try to use mainly solid colour schemes. As an example of how dithering can adversely effect file size, take a look at the 'sky 1,2,3' image that's shown below. Its file size (animated) is 2.4 kbs (and that's only because of the clouds), and it uses 24 colours from a 255 Adaptive palette, with no dithering. Even if we chopped the palette down to only 15 colours and we added dithering to it to make the clouds a smooth as they could be, the file size jumps to a whopping 8.4 kbs! That's almost 4 times as much. All for that tiny animation!? It's not worth it in the long run. So keep an eye out for that: it's always better to simply use more colours in the image's Global palette, than to reduce colours and add dithering.
• The speed of the frames should be long enough to allow for the message to be read completely, but not so long that a multi-page ad takes more than 5 to 10 seconds to cycle through. In the same respect, the frames shouldn't be set to 5/100s of a second either -- this would cause each frame to whip by in a blurred fury to get to the end of the message.

Product Box Shots

The above outline can also hold true for the rotating 'product box shot' type of animations. The one exception for these, though, is the fact that they are usually a lot smaller in dimension than a banner ad, and so the amount of colour used can be increased slightly. But attention should still be paid to the optimization of each separate graphic that's used in the animation; especially because these types of animations will usually contain more separate images than will a banner ad. And if you're optimizing individual images before you sequence them, use the Gif format, not the Jpg: Jpg uses a 'destructive' type of optimization, and Gif doesn't.

Topic Specific Animations or "Attention Grabbers"

Again, the above outline can also be followed and applied to these types of animations. Some variants may apply here though. One thing to watch for is that, when you compile the animation, you use what's called 'calculating dirty rectangles' wherever possible. It will definitely reduce the file size of animations, and allow you to create longer, more complex ones if need be. Not all animation programs have this capability, but most of the better ones do.

Here's what happens.

First, you assign one image to become the 'background' for the animation. It will usually be the first image you import into the animation program, and can also (in most cases) become the source for your animation's Global palette. The pixels in an animation background image will usually remain fairly constant throughout the animation, hence the title 'background'.

Next, you import or create the other images that you'll use in subsequent frames. For example, say we made a simple animation where, against a sky background, the numbers 1, 2 and 3 appear from left to right, and all three numbers remain in the animation until the end.

Using the 'dirty rectangles' method, this animation would have 4 frames:

1. the background


2. the numeral one


3. the numeral two


4. the numeral three

The numbers would have nothing else in their frames, just the single number digit. The program would then start off by showing only the sky image, followed by a sequential rendering of the number images overlayed onto the sky, until all the numbers were visible. If set to 'Loop', it would then start over with just the blank sky image (background).

The alternative method of creating the same animation would be to have 4 separate images of the sky, each of which also contained a numeral. The program would then consider each new image as a background, and render them in succession until it completed the sequence. The images needed for such an animation would then be:

1. just the sky image itself


2. sky with numeral 1 on it


3. sky with numerals 1 and 2 on it


4. sky with numerals 1, 2 and 3 on it

However, this animation would be about 4 to 5 times the file size that the 'dirty rectangle' method would produce. So you can see the benefits in using this method for most types of animations. Some programs have the ability to calculate the 'dirty rectangle' effect even though you use full and complete separate images. Banner ads and the like would probably not benefit much from this method, because each separate image is not at all alike in terms of the location of pixels in the graphics. And that's why they require that you pay more attention to optimization, and use a smaller number of Global colours.

Things to Note

If you add dithering to optimized images that contain text, you may cause the text to look 'gritty' around the edges. This also holds true if you dither images that contain a large number of solid colours. The solid colours will become 'speckled' in some areas where the dithering tries to do its job. Remember, you're much better off to add more colours to the palette than you are to add dithering. This rule applies to the Gif format specifically, whether it's animated or not.

There will sometimes (though not often these days) be the need to pay particular attention to which images are used first and last in your animations. The reason for this is that there are some older browsers that don't support animation in use today. Plus, some people prefer to browse with graphics turned off. What these users see will vary.

• The non-animation browsers will simply show whatever the first image in your animation is. In other words, if you have an empty frame/cell as your first image, then that's what will be rendered in those browsers. So choose your 'opening image' carefully. This might require that you put more thought into constructing your animation sequence, but it can and is done by many others, so it's possible, and not at all that difficult. Usually, you can get away with putting your last image (the 'end result' image, so-to-speak) as the first image in your list of frames/cells. Sometimes this can ruin certain types of effects, so the choice is up to you - it's your animation.
• When graphics are turned off only the contents of the image's Alt tag are visible. So be sure to fill it up with whatever message you're trying to relay to your audience with the animation.
• For non-looping animations you should note that whatever image comes last in the sequence is the one that will stay on the screen. So be sure to pay attention to that detail also when creating and compiling your images. This fact along with the 'non-animation supported' situation can lead to confusion when you're deciding what image should be first and which should be last. One method that solves both problems is to use your final image twice: once at the start, and once at the end (if you're not looping the animation). If you're using the 'dirty rectangles' method of optimization, it should help a lot here if you later decide to loop the animation. The only other choice here is to simply forego worrying about non-animation supporting browsers, and be more concerned about your closing graphic rather than your opening one.