At a Glance While technologies like Flash, ThingMaker, and Shockwave, have made Web animation more interactive, fun, and even audible, GIF animation is still the tried and true standby for Web design due to factors such as accessibility and inexpensive/free tools. However, since file size -- and thus time -- is of the essence no matter which animation technology you use, the primary objective for Web designers using GIF animations is to deliver the animation using no more information than is absolutely necessary. For GIF animation, the key to this objective is optimization. |
When GIF animations first leapt onto the Web scene, optimization was hardly an issue. The result was a flood of unoptmized and often poorly designed GIF animations. This created the false impression that GIF itself is strictly a low-quality animation option for the Web.
To be clear, "optimizing" an animation means that we are reducing its file size. The smaller the file size, the faster it will download. The goal is to make an animation's file size as small as possible while keeping it as presentable as possible. We will take a close look at the three GIF animation optimization techniques that are typically the most effective and then quickly talk about some of the other things that you can do to shave off a few extra bytes from your GIF animations.
The animated logo to the right is from the NavWorks Web site. We will use this 18-frame animation as the example animation for our discussion on optimizing GIF animations. While it provides valuable branding for the site, it is important that it doesn't take up too much bandwidth. This animation was created with GIF Movie Gear, a PC-based GIF animation program.
Reducing colors? Use a global palette
Typically, the more colors there are in an animation, the larger its file size. Due to how the GIF format compresses (using the LZW compression scheme), this is not always true, but this generalization holds true for the majority of GIF animations. It's important to understand that each frame in an animation can have a maximum of 256 colors. These colors must be stored with the GIF file in a palette. The more colors in a palette, the larger the files size.
Fortunately, you can use a single color palette for all of the frames in an animation. This is often referred to as a "global palette." Since palette information in a GIF animation is not compressed, an excellent way to optimize a GIF animation is to use a global palette for all the frames in the animation and to limit the number of colors in the global palette to as few colors as possible.
For example, the unoptimized size (at right) of the NavWorks animation is 47.5-Kbytes. Even though the NavWorks animation logo has not been optimized, it is slightly optimized because GIF Movie Gear converted all of the frames to a global palette when the frames were imported. If each frame had it's own 256 color palette the file size would be over 60-Kbytes. So, by using a global palette, the animation has already received a file size savings of over 12.7-Kbtyes.
Look carefully at the animation and you'll see that it's really composed of a few tones of gray and burgundy. So, 256 colors is probably too many colors for this animation. In fact, it looks fine at 32 colors. Reducing the animation from 256 colors to 32 colors reduces the file size down to just over 31-Kbytes -- a savings of over 16-Kbytes. When you add it up, the total savings is almost 30-Kbytes. By using a global palette and reducing the number of colors in that palette, I was almost able to reduce the file size of the animation in half.
"Dirty Rectangle" optimization
Dirty Rectangle optimization refers to a mode of optimization that involves cropping frames in a GIF animation to their smallest needed rectangle. These frames are then placed on top of each other using pixel coordinates for placement. The easiest way to understand this is to look at an example.
Look at the figure above. This shows each frame of the NavWorks logo after it has been optimized by the "Dirty Rectangle" method of optimization. Unneccessary or redundant portions of the frames have been cropped out. So, after the first frame, each frame is a smaller GIF file. The smaller GIF files are displayed over the first frame using pixels coordinates for their placement. Since the smaller GIF images only partially cover the first frame, you can still see parts of the original frame as the animation plays.
An animation optmized with the "Dirty Rectangle" method is really a collection of various sized GIF frames. The basic idea is that the smaller a GIF frame is, the less it adds to the overall size of the animation. By using the "Dirty Rectangle" method of optimization to create the NavWorks logo, I was able to reduce the animation's size from 31-Kbytes to just under 16-Kbytes. Again, nearly cutting the file size in half.
Interframe transparency optimization
Another way to optimize an animation is to make redundant portions of animation frames transparent. This often, but not always, results in file size savings. This is done by using two features in the GIF file format: transparency and disposal methods. Some colors in a GIF file can be made transparent, allowing the background image or color to show through them. The same is true for frames in an animation -- if parts of the frames are transparent, they show through to any other frames behind them. This is referred to as "Interframe Transparency" (some GIF animation utilities refer to it as "Frame Differencing").
Disposal Methods control how the browser will display frames of a GIF animation, and they determine how subsequent frames are displayed over previous frames. You will need the disposal method that allows transparent portions of GIF Animation frames to show through to earlier frames. GIF Animation utilities have different names for Disposal Methods, so you will have to check your animation utility for this feature.
The figure above shows the NavWorks logo animation after it has been optimized with Interframe Transparency. The bright green portions of each frame have been made transparent. This works visually when the animation is played because the GIF Animation utility has compared each frame, making any pixel transparent if it was the same color in the previous frame. This explains the term "frame differencing." Frames are compared with one another, making any redundant pixels transparent.
The Interframe Transparency optimization once again cut the animation's file size in half. With only color/palette reduction and "dirty rectangle" optimization the file size was 15.8-Kbytes. With interframe transparency optimization, the animation was reduced to 7.9-Kbytes. So, with all three of the GIF animation optimization techniques discussed, we have reduced the animation from 48-Kbytes down to just under 8-Kbytes -- and without damaging the visual quality of the animation at all as shown below.
Can you tell which image has been optimized, and which one hasn't? The unoptimized (48-Kbyte) image is on the left, and the optimized (7.9-Kbyte) animation is on the right.
Other optimization techniques
There are several other methods for optimizing GIF animations; some substantial, some minor. One technique often overlooked is that of removing frames. The fewer the frames in an animation, the smaller the file size. For example, when every other frame in the NavWorks logo is removed the resulting animation is only 6-Kbytes.
Another important way to keep your animations' size to a minimum is to crop them down to the smallest size possible. Similarly, some animations work just as well when they are smaller. Many animation utilities, such as GIF Movie Gear (for Windows) and GifBuilder (for the Mac), allow you to crop and resize animations. Finally be sure to turn off interlacing and GIF Comment blocks since both of those features tend to add a few unnecessary bytes to the filesize of a GIF animation.
All GIF animations are different and the LZW compression that the GIF format employs means that compression results can often be a bit unpredictable. However, once you master GIF animation optimization, you will be free to make more interesting animations without fear of them weighing down your Web pages. Also, for animations such as banner ads, smaller GIF animation file sizes will result in more views and a better overall impression of the ad. No matter how you look at it, taking the time to optimize GIF animations is usually well worth the extra effort.
Understanding Imagemaps
Pop-up Windows Made Easy
The New Web Strategy
Optimizing GIF Animations