Optimizing Animated GIFs
A reader asks...
I am just learning to make animated GIFs, but they are large files. I have tried to use some image optimization software... and all do a fine job shrinking GIFs, unless they are not animated. What is the best shrinker out there?
Scroll down for my answer...
Use similiar colors from frame to frame.
Reduce pixel dimensions.
Eliminate unnecessary frames.
Avoid gradients and textures.
Most of the GIF compression software works in a similar way, so it's not so much a matter of finding the "best" program. A better approach would be to learn about how GIF compression works and keep that in mind throughout the image creation process. Here are several important points about GIF images and how they compress:
GIFs are indexed color images. That means that a GIF file contains a limited color palette that is saved with the image. The less colors you use in the image, the smaller the file will be. With animated GIFs, that means every frame in the file uses the same color palette... so, if you are varying the colors a lot from frame to frame, you're going to have a much larger file. Try to limit your colors as much as possible, and use similar colors from frame to frame.
Cutting down the pixel dimensions is probably the single best way to decrease the file size of GIF images. Cutting down the number of frames in an animated GIF is right up there with it. GIF animations are simply not suitable for large dimensions. In general, to keep them a reasonable size for use on the Web, you should never be creating GIF animations more than a couple hundred pixels in either direction.
In relation to animated GIFs, every additional pixel has to be multiplied by the number of frames in your image. Likewise, each additional frame in your image also increases the file size. Without getting too technical... think of it like this: Every time you add more colors, pixels, or frames to your animation, it costs you in file size. Colors don't costs quite as much as pixels or frames, but for every frame you add, you have to multiply it by the number of pixels in the image. And the larger the pixel dimensions, every frame adds that much more to the file size.
There is one exception to that. Some GIF animation/optimization software includes a feature that compares each frame to the previous frame and discards any pixels that do not change across frames. With this feature you can significantly reduce the size of an animation that includes repeating elements. Keep this in mind when you are designing your animation; the more pixels that change from frame to frame, the larger your animation is going to be.
Another thing that can increase the file size is the use of dithering. Dithering reduces banding and makes your image appear smoother when you eliminate colors because it varies (or dithers) the pixels in the image to simulate color transitions with less color. So, there's a trade-off between reducing colors and using dithering. You just have to compare the results of each and decide which is the better trade-off.
- GIFs with large areas of solid color compress very well.
- Textures, photos, and images with lots of color transitions don't compress well.
- Horizontal rows of continuous color compress better than vertical color transitions. (See example at right compared to middle example above.)
- Images with color gradients don't compress well as GIFs because they need more colors to produce a smooth gradient.
Personally, I find that the optimization wizard in Jasc's Animation Shop to be very good for optimizing GIFs that you've already created. It does have the feature I mentioned above for comparing frames and discarding unnecessary pixels. Most animated GIF creation software and Web graphics software also has this feature. Often I'll export a GIF animation from another software program and then run it through the Animation Shop optimization wizard and export several copies using different optimization settings so I can compare the results. It's nice because Animation Shop can extract the frames from existing animations and you can discard frames if you need to or export the individual frames as separate images.
Questions? Comments? Post to the Forum!