GIF Optimization

GIF, or Graphics Interchange Format, is an indexed color image format created by CompuServe in 1987 (GIF87) and modified to support animation, transparency, and interlacing in 1989 (GIF89a). [5] GIFs have a maximum color bit-depth of 8, which stores a maximum of 256 colors. Indexed color images work well for buttons , bullet points, arrows, borders, and logos. They are not a good choice for photographs and 3D artwork.

[5] CompuServe, "Graphics Interchange FormatVersion 89a," (GIF89a) [online], (1990), available from the Internet at

Indexed color images consist of a palette table and matrix of palette indexes instead of RGB color values. The maximum palette size is 256 colors. There are several advantages of this approach:

  • File size The index is 8 bits per pixel while RGB values are 24 bits, so the image file becomes three times smaller.

  • Transparency In palette-based formats, one color can be declared as transparent. All the areas filled with this color will be transparent.

  • Better compression LZW- and deflate-based algorithms compress indexes much better than RGB values.

Palette-based images also have some disadvantages, however:

  • RGB to indexed color conversion requires "color quantization." This process is lossy, because there is no way to convert 16 million colors to 256 without some loss.

  • GIFs and PNGs use lossless compression algorithms. There is no way to sacrifice quality for the sake of file size besides palette reduction and raising redundancy along scanlines in programs like Photoshop ( and Fireworks ( with their "lossy" GIF sliders.

LZW Compression

GIFs use LZW compression that looks for repeated pixel patterns along rows. [6] LZW is a member of the LZ78 class of algorithms, which substitute dictionary indexes for existing byte phrases. [7] The actual algorithm is a variable-length variant of the Lempel-Ziv (LZ) algorithm that substitutes variable-length codes (or tokens) for patterns detected in the data stream. The algorithm builds a translation table of patterns detected in the data stream. Each time a new pattern is found, it is entered into the table. Identical patterns are replaced by a table index. When these tokens are smaller than the phrase they replace, the file is compressed.

[6] Terry A. Welch, "A Technique for High-Performance Data Compression," IEEE Computer 17, no. 6 (1984): 819. The LZW algorithm described.
[7] Jacob Ziv and Abraham Lempel. "Compression of Individual Sequences via Variable Rate Coding," IEEE Transactions on Information Theory 24, no. 5 (1978): 530536. LZ78 described.

The initial size of each code or token is usually determined by the bit-depth of the image. Variable-length codes range from 3 to 12 bits each. This is one reason why smaller bit-depths result in smaller GIFs.

Minimize Bit-Depth

Being a palette-based format, the size of a GIF is directly related to the size of its palette, or the number of colors in the image. File size jumps each time you cross over a factor of 2, or 1 additional bit. A 65-color image must use a seven-bit palette, while a 64-color image can use a six-bit palette. Minimize the number of colors you use within GIFs to minimize file size.

Avoid antialiasing of text where possible because this adds more colors. Design your images with orthogonal and 45-degree lines.

For More Information

See the "Text and JPEGs" section and Web Style Guide, 2 nd ed . for more details ( For some fonts specifically designed for monitor display, see

Color Quantization

Color quantization is a fancy name for converting RGB images into indexed colors. There are several quantization algorithms. The first ones did not always work well, so graphics programs gave you a choice. Nowadays, they've figured out how to do it right, so programs don't ask you to choose anymore.

They do ask you, however, which palette to quantize to. Usually they offer standard palettes ( Windows System, Mac System, and Web Safe), Selective, Adaptive, or "Web-snap Adaptive." Some tools also offer a Perceptual palette. This is a variation of the Selective palette adapted to the human eye. In some cases, the Perceptive palette works slightly better than the Selective or Adaptive palettes.

Influence Histograms

For smooth-toned images, you can influence the color palette Photoshop creates by first creating selection(s) over troublesome areas likely to create banding. When you convert from RGB to indexed color, these selections influence the color palettes produced by Photoshop. This makes it possible to optimize the color palette of images more precisely to minimize banding for GIFs and PNGs.

Minimize Dithering to Smooth Things Over

Color quantization can convert smooth color gradients into discernible bands of color. Dithering is the process of strategically mixing pixels to smooth out these edges. Dithering blends pixels of available colors to emulate colors eliminated from the original image by the color quantization process. Images with dithering usually look better, but dithering makes files bigger.

The LZW algorithm used in the GIF format looks for repeated patterns in pixels along horizontal scanlines. Anything that disturbs this regularity will increase file size. Certain types of dithering (such as pattern dithering) are more "regular" than others and therefore compress better in LZW. However, diffusion dithering usually looks better than pattern dithering.

A 32-color image with 100 percent dithering often has the same size as 64 colors image with no dithering. However, dithering allows you to use lower bit-depth images that can be smaller. Experiment with different settings. If an image looks bad without dithering, consider converting it to JPEG. Try to use as little dithering as possible to minimize file size (see Figure 12.9).

Figure 12.9. Full-color balloon quantized to 64 colors in PhotoGIF (with a dash of dithering).
Dithered Transparency

First seen in Ulead's SmartSaver, dithered transparency allows you to simulate an alpha channel's partial opaqueness in GIFs. Dithered transparency disperses transparent pixels in the image so that the underlying image shines through. In ImageReady 7 and Web Image Guru 5, you can use dithered transparency to help blend GIFs seamlessly over background images.

Maximize Horizontal Redundancy and Flat Color Areas

To minimize the size of your GIFs, design them with the LZW algorithm in mind. LZW likes row upon row of large areas of flat color or the same pixel pattern. Avoid gradients ( especially horizontal) and continuous-tone areas of color. Think horizontally when designing GIFs. IBM's logo is an excellent example of a compressible image. It has few colors and uses horizontal features.

The so-called "lossy" sliders in Photoshop and Fireworks increase horizontal redundancy by changing similar patterns into identical patterns and strategically rearranging and replacing pixels. This improves the compression efficiency of the LZW algorithm because there are fewer patterns to store. Low levels of lossy are hardly noticeable, but higher values can cause noticeable horizontal artifacts.

Consider Interlacing to Improve Perceived Speed

The GIF89a format supports interlacing. This feature quickly shows a lower-resolution version of the image and then gradually improves the resolution until the image is fully downloaded.

GIFs use a four-pass one-dimensional interlacing scheme, with the first pass displaying 1/8 (12.5 percent) of the image. Subsequent passes display 25, 50, and 100 percent of the image. The first pass stretches the pixels by a factor of 8, the second by a factor of 4, and so on.

Interlacing can increase the file size of GIFs by 5 to 15 percent. Interlacing doesn't make sense for smaller images. For larger GIFs, consider interlacing for imagemaps and the like to give users something to interact with quickly. Don't interlace animated GIFs, unless you want to annoy your users. For minimum file size, avoid interlacing indexed formats.

Use Weighted Optimization

Like JPEGs, you can use alpha masks to apply different degrees of optimization to different parts of your image. In Photoshop or Fireworks, create an alpha channel mask to select areas where you want to apply different optimization levels. You can selectively reduce colors, apply dithering, and impart lossiness to fine-tune your optimization for different areas of your image.

Browser Issues

A few older PCs still work in 256-color mode. [8] In these older machines, the browser converts all the images to the local palette. If an image contains colors not in the local palette, the browser may apply dithering. For large areas filled with the same color, dithering can be pretty noticeable. To avoid this problem, fill large areas of flat color with non-dithering colors that will be in the browser's local palette.

[8] Only three percent of client PCs have 256 colors or less as of September 2002. Source: http:// thecounter .com/stats/

There are 216 so-called "web-safe" colors that are always present in the palette of most web browsers. The R, G, and B values happen to be multiples of 20 percent, or 51 in decimal, and 33 in hex. So any combination of 00 , 33 , 66 , 99 , cc , and ff are web-safe colors. 216 colors (a 6x6x6 color cube) cover all the possible combinations. In the past, I would have recommended using this restricted set of colors for palette-based images. However, because most client PCs (97 percent and growing) now have 65,000 colors or higher, the non-dithering palette may go the way of the dinosaur.

There is one caveat, however. A client PC can display its bit-depth only for the entire screen, including all the windows and images it displays. If you have a full-color image in one window and an image with a different palette in another window, the second image can still experience some color shifting or dithering. If you want to avoid any possibility of ditheringeither for the three percent of users with 8-bit displays or for those times you're working with images that have different palettescoordinate your palettes and use web-safe colors where possible.

JPEGs are true-color images, so many authors adopt a hybrid approach letting JPEGs dither for the few users with older machines, and using non-dithering colors for GIFs, PNGs, and background colors. For more information on color palettes, see Chapter 7, "CSS Optimization."

GIF Optimization Summary

The best way to optimize GIFs is to design them to make the LZW algorithm happy. You can help LZW along by designing your GIFs to include horizontal features that repeat and maximizing flat areas of color. Reduce bit depth, use the appropriate palette, and limit the amount of dithering you use. Avoid antialiased text because it increases the number of necessary colors. In summary, to optimize GIFs, do the following:

  • Minimize bit depth and maximize cropping.

  • Maximize flat areas and similar row patterns (use "lossy" and "smoothing" sliders).

  • Consider interlacing larger GIFs, to give a preview (but don't interlace animated GIFs!).

  • Avoid antialiased text and convert graphic text to styled text wherever possible.

  • Use 72 dpi resolution.

  • Use a high-quality quantizer to minimize banding and minimal dithering to smooth things over.

  • Influence histograms where possible to optimize custom palettes and minimize banding.

  • Remove embedded comments.

  • Use short, descriptive alt attributes for functional images, and blanks for spacer images.

Optimizing Animated GIFs

An animated GIF (or the GIF89a format) is just a set of indexed-color GIFs with embedded timing and looping information. This means that everything applicable to GIF optimization also applies to animated GIFs.

Working with animation gives you some animation-specific tricks because of the multiple frames and various disposal methods that you can choose. As far as timing goes, avoid infinite loops and short cycle times because they strain CPUs and can distract and annoy your users.

First, you don't have to make all the frames as big as the image size. The first one can become a "key" frame, and the others can be smaller and offset within the "logical screen." [9] This allows the image to be composited onto the screen, leaving non-image pixels alone. Resizing them down to the size of the area that has actually changed is an inter-frame technique that improves compressibility because there are fewer pixels to compress.

[9] CompuServe, "Graphics Interchange Format" [online].

Second, if part of the frame is identical to the background, make it transparent. Because more pixels have the same color, the odds of longer runs of that color improve; hence, it tends to be more compressible.

The GIF89a format supports multiple palettes. You can have an individual palette for each frame. Sometimes it makes sense to use a global palette, and sometimes it is better to create a local one. Smaller palettes provide better compression for two reasons:

  • The palette itself consumes less space.

  • Fewer bits are needed to represent the image color indices so the GIF codes start out at a smaller bit length.

Because they are built with multiple GIFs, animated GIFs allow inter-frame optimization. Some older programs use minimum bounding box inter-frame optimization that offsets a smaller box surrounding the pixels that change within the "logical screen" of the image. Many graphics programs use frame differencing, in which only the pixels that change from frame to frame are preserved. The pixels identical to the previous frame are set to the transparent color within the bounding box, leaving only the pixels that change.

Finally, the best optimization programs take frame differencing one step further. They perform run-length intra-frame optimization by equalizing run-lengths of some differenced lines to help the LZW algorithm better optimize the composite GIF89a. Intra-frame optimization provides up to two percent better compression than frame differencing.

Many tools optimize GIF animations automatically. Look for tools that provide intra-frame optimization for better compression. GIFMation and SuperGIF (,, Fireworks (, and WebPainter ( provide intra-frame optimization.

For More Information

For more details, see Andy King's "Optimizing Animated GIFs" article at http://www. webreference .com/dev/gifanim/.

Optimizing Animated GIFs Summary

In summary, for the smallest animated GIFs, do the following:

  • Use the same techniques you use for GIFs (minimize bit depth, maximize cropping).

  • Minimize the number and size of frames.

  • Use intra-frame optimizers and horizontal movements.

  • Use regional bit-depth reduction (be selective by surrounding flatter areas).

  • Use lossy GIF sliders (Fireworks MX).

  • Remove comments.


Speed Up Your Site[c] Web Site Optimization
Speed Up Your Site[c] Web Site Optimization
ISBN: 596515081
Year: 2005
Pages: 135 © 2008-2017.
If you may any questions please contact us: