|Fleeting Glimpse > GIF Animation Instructions > Compress|
This is an essential step in making GIF animations. So far you have been constructing the animation using the 216-color web palette and drawing each image the full size of the animation. This will work fine, however it will result in the animation file being bigger and slower to download than necessary. So in this step we'll compress the animation file using some of the compression functions of the animation software.
Using the compression software
A Warning -- save your animation file before compressing it
When you compress an animation, it may significantly change your file; changing the palette, eliminating pixels, adding transparency, changing remove by setting, etc. Often it is difficult or impossible to modify compressed animations. Few programs allow you to undo or uncompress an animation. So you should make sure you save a copy of your original uncompressed animation safely under another name before running the compression function.
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 >>
Also having a global palette, and not having to stores a local palette for each image also saves space.
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.
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
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.
Notice the big size reduction achieved for the Home animation. Also note that the transparent backgrounds don't compress as well. Overall A Smaller Gif does the best job for these animations especially when considering transparent backgrounds. Results may vary for other animations.
So what is a good size for an animation file?
Not just for animations
|Fleeting Glimpse > GIF Animation Instructions > Compress|