Web Design in a Nutshell

Chapter 17. Designing Graphics with the Web Palette

When images with colors from the full 24-bit color space are displayed on 8-bit monitors (capable of displaying only 256 colors), browsers do the best they can to render the image using colors in their own built-in Web Palette. (Note that if the browser is running on a 24-bit display, the Web Palette does not come into effect and all colors will be displayed accurately.)

Remapping images to the Web Palette can result in unpredictable and undesirable dithering. Not only that, sometimes flat colors shift to the nearest web-safe colors without dithering. The algorithm for deciding which colors to shift and which to dither (as well as choosing where to shift) differs depending on the browser brand and version.

But because you know exactly which colors will not dither, you can use the Web Palette to your advantage by choosing these colors in the image creation process. It requires a little extra effort, and an adjustment to a limited color choice, but the payoff is that you get to see your image the way everyone else will, with fewer surprises. It gives you, not the browser, control over whether and how the image will dither.

If you don’t care about dithering or how your graphics appear on 8-bit monitors, then this chapter is not for you.

The techniques in this chapter apply to graphics that use 8-bit palettes such as GIF or PNG. Because PNG is not widely supported at this time, GIF is featured in the following examples.

The Web Palette ...