Optimizing .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. Make sure that .gif is the appropriate file format for displaying your graphic on the Web.
    The .gif file format is much better than .jpg for displaying "drawn" imagery, related to resulting files sizes that are much more efficient. However, it is often the case where the 8-bit .png file format will result in even smaller file sizes and download/display times. .gif still tends to have superior compression for very small graphics and/or graphics that are saved as animated files. However, one should evaluate whether .gif is, in fact, the superior file format to use on an image-by-image basis.

  3. Pre-size your images to the dimensions you wish to display on your web site.
    A common mistake that many web developers will make is to load a graphic on to their web server at very-large dimensions, but then force the display of that graphic into a much smaller area (i.e. 300 pixels high by 200 pixels wide). Failing to re-size one's graphics to the size in which they are being displayed on a web page can result in dramatically larger images for servers and browsers to process, for no good reason.

  5. Remove any excess colors.
    When creating .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.

  7. Avoid the use of interlacing.
    For very large images, many web developers have employed a tool called interlacing, which downloads a rough whole image and gradually increases the image's clarity, instead of downloading from the top of the image and moving downward as is typically done. While this is effective in letting a site's visitors know that "something is coming," it will typically add to an image's overall size and download/display time.

Tools that will allow you to complete these techniques:
Adobe Photoshop (Mac/Windows): Cost: $$$$ | Quality: B+ | Ease of Use: C | Use With: 1, 2, 3, 4
gif2png (Windows): Cost: Free | Quality: A- | Ease of Use: B | Use With: 1
gifsicle (Mac/Windows/Unix): Cost: Free | Quality: A | Ease of Use: B | Use With: 3, 4
ImageMagick (Mac/Windows/Unix): Cost: Free | Quality: A- | Ease of Use: B | Use With: 1, 2, 3
SuperGIF (Mac/Windows): Cost: $ | Quality: A | Ease of Use: A | Use With: 3
xat.com Image Optimizer (Windows): Cost: $ | Quality: A- | Ease of Use: A- | Use With: 1, 2, 3, 4 [review]

  Four Examples
  Samples on Site
  Samples on Blog