There are several programs that will compress GIF animations automatically. Some do a better job than others -- I'll show a comparison later. But for now here are some notes on using a few programs I mentioned earlier on the Getting Ready page;

- Gifcon has a compression algorithm called Supercompress. Once you have your animation assembled and working the way you want, you can compress it by selecting from the menu FILE|SUPERCOMPRESS. In the dialog box select PALETTE COMPRESSION and PRUNE OVERLAPPING FRAMES (if it's available) and click START. When the compression is done, SAVE the compressed animation using a new name so you don't lose your original file.

Gifcon's Supercompress (version 1.0P) has a significant limitation. If your file contains transparency or "Remove by background" settings, supercompress will not do a pixel/pruning compression (it will be greyed out; you won't be able to select it). This limitation makes it necessary to look elsewhere for a more sophisticated procedure to compress files with these settings (see A Smaller Gif below in the In-Depth section).

That's all there is to compression. If your making one of your first animations, you may want to move on to the next step. If you want to know more about how compression works, and how different software performs, read on.

Fast Forward >>

Compression techniques
There are two major techniques for compressing the animation -- color compression and pixel compression (also called pruning) -- and a couple minor ones like eliminating comments and certain technical parameters that aren't always used.

Color compression
A gif file can store from 2 to 256 different colors (1 bit to 8 bit color), however the more colors, the bigger the file. If you used significantly less colors than 256 colors, you can make the file smaller by compressing the color palette. Take the bouncing ball animation for example - I drew the images using only 4 colors (black, grey, green and red) but the global palette contained 256 colors in the palette. The file was saving 252 colors that I didn't really need. By compressing the palette from 256 colors (8 bit) to only the colors used colors (2 bit in this case) the file was reduced from 2622 bytes to 1455 bytes -- a 45% reduction in size.

Also having a global palette, and not having to stores a local palette for each image also saves space.

Pixel compression
The second, and often more significant, way to reduce the file size is to prune out redundant pixels. Often only a small section of an image changes from image to image. Having each image be a full image is a waste of space. Consider the Home animation. I've recommended drawing each frame of the animation full size since it is usually easier to draw and assemble. But this results in an animation where all the non-moving parts are redrawn for each image along with the moving parts. Wouldn't it be nice if your browser could download a much smaller image of the section that changed and just draw it over the rest of the image? Well it can -- that's what pixel compression does. There are several different techniques to do this, the basic ones being "minimum bounding box" and "difference method" (sometimes called dirty rectangle").

Below are two frames from the Home animation. In the second frame I've drawn a white box around the portion of the frame where the change is occurring. This is the smallest rectangle necessary to maintain the image. Note that the box includes both the new and previous position of the lamp. Think of it as cropping out a sticker to paste on the previous frame. The sticker must cover up the old lamp as well as position the new lamp. The upper left coordinates of the box are (12,9); this is the offset necessary to position the partial image on the animation screen.

1st Frame	2nd Frame upper-left corner (12,9)	Cropped 2nd Frame

The third figure shows just the smaller cropped section of the image. This partial image can be assembled into the animation as long as we tell the program where to place it. In Gifcon, double clicking on the Image block opens a dialog box which has the settings -- Image left, Image top. For full images these are set to 0, but for this smaller image piece, Image left is 12 and Image top is 9. Using this smaller piece of the full frame reduces the size of the GIF animation file. This is the "minimum bounding box" method of compression.

But there is actually more that can be compressed. In the small cropped image above there is still some detail (like the yellow chair and part of the blue moving man) that is redundant with the first image. If we could eliminate these redundant pixels the file could be even smaller. Well there is a way to do that -- we can replace the all the redundant pixels with transparency and let the first image just show through. The new cropped frame now looks like the image on the right. Note it includes a black patch to cover the lamp shade's old higher position. This is called the difference method of compressing, since each image only holds the pixels that are different from the previous image.

Note that transparency is used for the difference method of compression, where the area behind the transparency is the previous frame. Up to now we have talked about using transparency to display a moving object against the web page background, where the area behind the transparency is the web page background. If you specify transparency for visual reasons, that is, a transparent background, it limits the compression program's ability to use transparency for compression. This is one explanation why animations with transparent backgrounds may not compress as well as those with solid backgrounds.

There are some other pixel compression techniques that squeezes out a bit more but they are basically refinements of these fundamental methods.

A couple other programs for doing compression
Besides the built-in compression function in Gifcon, there are a couple other programs worth considering. There are links to these in the Getting Ready step

Smaller Gif in my experience does the best job of compression and is very easy to use. Before using the program to compress GIF animations, make sure to set PREFERENCES by selecting it from the FILE menu. In the preferences dialog box, check "Exclude (0,0)from frame rectangles" and "Use interframe transparency". Set transparency index to "superlow" band. Leave the other choices unchecked. This will give you the best compression that is most compatibility with other browsers. (Click on Compatibility to see which browsers are compatible)

To compress a file, open it in A Smaller Gif, select FILE|TEST COMPRESSION. A message will display how much A Smaller Gif can compress the file. Then just save the file -- with a new name of course.

A Smaller Gif has no problem compressing files with transparency and Remove by background settings.

Gif Wizard is a third choice for compressing animations. Just go to the website and try it out -- it's free. The FAQ explains what to do.

Software Comparison
So what are the results of compressing the bouncing ball and Home animation with different programs? Here are the file sizes in bytes and % reduction achieved;

So what is a good size for an animation file?
We've been beating on the file throughout these instructions, what is a good result? My rule of thumb starts with the goal to keep any web page less than 30k if possible, including the HTML file. If my animation is under 5k, I feel great, under 10k is pretty good. When animations get up around 20k, it better be a pretty important part of the page and I try not to have any other significant graphics on the page to compete with it.

Not just for animations
Palette compression is useful for more than just animation files, you can also palette compress any GIF single image file to reduce it's size so it loads faster. Just load the file into Gifcon or other program with palette compression and go through the compression steps.