Channels ▼
RSS

Optimizing GIF Animations


WebReview.com: Optimizing GIF Animations

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.

Back to Basics

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.

Fully optimized NavWorks logo.

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.

Unoptimized NavWorks logo.

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.

Figure 2

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.

Unoptimized animation. Fully optimized animation
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


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.