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 reader. All of these forms of animation have their merit, and all can be used quite effectively.
August 17, 1999
Banner Ads
For banners, the industry standard size is now 468 by 60 pixels. Because of their size, they require explicit 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 effectively in keeping the number of 'pages' needed/used in the banner to a minimal amount, thus keeping its overall file size down also.
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 better optimized. There's usually a small trade-off here in image quality, by the way. Small price to pay, though.
As little image Dithering and use of gradients as possible is always recommended. Try to use mainly solid colour schemes. As an example of how Dithering can adversely affect file size, take the 'sky 1,2,3' image that's shown below this. Its file size (animated) is 2.4 KB (and that's only because of the clouds), and it uses 24 colours from a 256-colour Adaptive palette, with no Dithering. Even if we chopped the palette down to only 16 colours and we added dithering to it to make the clouds as smooth as they could be, the file size would jump to a whopping 8.4 KB! That's almost 4 times as large. All for that tiny animation? Not worth it in the long run. So keep an eye out for that. It's always better simply to 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, they shouldn't be set to 5/100s of a second either, causing 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 is the fact that they are usually a lot smaller in dimensions than a banner ad, and so the amount of colours used can be increased slightly. But attention should still be paid to the optimization of each separate graphic used in the animation - especially because these types of animations will usually contain more separate images than a banner ad will. And if optimizing individual images before sequencing them, use the Gif format, not the Jpg. Jpg uses a 'destructive' type of optimization, Gif doesn't.
Topic Specific Animations (Attention Grabbers)
The above outline can also be followed and applied to these types of animations. Some variants may also apply here though. One thing to watch for is that when compiling the animation, wherever possible you should use what's called 'calculating dirty rectangles'. It will definitely reduce the file size of animations, thus allowing you to create longer, more complex ones if need be. Not all animation programs have this capability, but most of the better ones do nowadays.
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 would import/create the other images to be used 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 till the end. Using the 'dirty rectangles' method, this animation would have 4 frames: (1) the background, (2) the number one, (3) the number two,and (4) the number 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 with each new number(s) contained on it also. 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 #1 on it, (3) sky with #1 and #2 on it, (4) sky with #1, #2 and #3 on it. This animation however 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 it for most types of animations. Some programs have the ability to calculate the 'dirty rectangle' effect even though you're using full and completed separate images. Banner ads and the like would probably not benefit much from this method due to each separate image not being at all alike as far as where the pixels are located in the graphics. And that's why they require more attention to optimization, and using a smaller number of Global colours.
Things to Note
Adding Dithering to optimized images containing text may cause the text to look 'gritty' around the edges. This also holds true for Dithering images that contain a large amount 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 adding more colours to the palette than you are adding Dithering. This rule applies to the Gif format specifically, animated or not.
There will sometimes (not much these days) be the need to pay particular attention to which images are used first and last in your animations, the reason being that there are some older and non-animation supporting browsers in use today. Plus, some people prefer to browse with graphics turned off. What will be seen by these browsers 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 more premeditative thought go into constructing your animation's 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 you to confusion when deciding what image should be first and which should be last. One method to solve 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 simply to forgo worrying about non-animation-supporting browsers, and be more concerned about your closing graphic rather than your opening one.
