Optimizing animated .gif Imagery

To gain a deeper understanding for how the .gif imagery you are using works (and how it is put together), you may visit our "Anatomy of GIF Imagery" page on this site for a much more in-depth explanation. If, however, you are simply looking to learn how to optimize the 8-bit .gif imagery on your web site, you can apply a number of techniques in effort to reduce the size of those files:

  1. Remove any excess colors.
    When creating animated .gif files for display on the web, many software programs will default to using 8-bit color to display the images. This means that a total of 256 colors (216 on a PC, since Windows reserves 40 colors for other purposes) will be used to create and display the graphics that you see. As is often the case, however, many graphics will not need NEARLY that many colors to be displayed properly on-screen...and reducing the number of colors to 128 (7-bit), 64 (6-bit) or less will typically result in dramatic savings related to file size.

  2.  
  3. Reduce the number of frames in the animation to the smallest possible number.
    It sounds far too easy/logical, but reducing the number of frames that are used to create the animated effect in a .gif file can substantially reduce the size of the resulting file.

  4.  
  5. Minimize the bounding rectangle for the changed pixels in your animation.
    One can achieve a substantial amount of frame optimization by minimizing the bounding rectangle within an animated .gif file to include only the areas which are being altered as a part of the animated presentation.

  6.  
  7. Apply interframe transparency optimization to the file.
    Several software tools in the marketplace will allow designers to save only the pixels that have changed from frame to frame within an animated .gif file, also occasionally referred to as "frame differencing," which can help to achieve a substantial amount of file size savings.

  8.  
  9. Apply a LZW compression algorithm to the file.
    The Lempel, Ziv, and Welch compression algorithm substitutes strings of data for patterns, and works well in both .tif and .gif file formats. Using this lossless technique will generally reduce a file's overall size by at least several percent.

  10.  

Tools that will allow you to complete these techniques:
Adobe Photoshop CS3+ (Mac/Windows): Cost: $$$$ | Quality: B+ | Ease of Use: B | Use With: 1, 4
GIF Builder (Mac): Cost: Free | Quality: A- | Ease of Use: B+ | Use With: 3
gifsicle (Mac/Windows/Unix): Cost: Free | Quality: A | Ease of Use: B | Use With: 1, 2, 3, 4
SuperGIF (Mac/Windows): Cost: $ | Quality: A | Ease of Use: A | Use With: 1, 5


 
  Four Examples
 
 
 
    Other:
  Samples on Site
  Samples on Blog