By Jennifer Burke
If your web site uses color, whether in graphics, backgrounds, or text, you can get the most out of those colors by optimizing them for your audience. Many web surfers use monitors that display only 256 colors (8-bit color). When a browser on an 8-bit system encounters colors not available to it, it will dither or substitute.
What Is Dithering?
Dithering is an attempt to fool the eye into seeing a particular color when that color is, in fact, made up of "dots" of two or more other colors. A browser, for example, when encountering an image that uses colors not available to it, will pick two or more colors that are available and mix them together to achieve some semblance of the intended color. Unfortunately this mix is achieved by using rather noticeable chunks of each color that really don't do a very good a job of fooling the eye.
What Is a Substituted Color?
Color substitution by a browser occurs when the html-specified color is unavailable on the system. For example a colored table cell designated TD BGCOLOR="#336677" will display as its nearest available equivalent. Unfortunately, each browser on each platform behaves differently when deciding what that nearest equivalent is, leaving your design wide open to the interpretation of each browser.
Colors That Make the Cut
Exactly which 256 colors are available is determined by a combination the operating system and the application running on it. Browser applications have 256 specific colors available at 8-bit. Unfortunately, Microsoft Windows requires--for its own display--40 color slots that are not amongst those 256 browser colors. Guess who triumphs? (Hint: not me, not you, and not the browser.) The outcome of this match is that only 216--not 256--particular colors will display without dithering or substituting on a Windows/8-bit system. Everything outside that palette is subject to the vagaries of a mysterious algorithm that behaves differently on each browser brand and operating system.
On the left, below, are the 256 colors that browsers, given free rein, will display at 8 bits without dithering (e.g. on a Mac). Note that this is the same as the Mac system palette. On the right are the 216 colors that browsers, running on Windows, will display at 8 bits without dithering (if you're looking at this page under those conditions, this should appear self-evident). These 216 colors are considered "browser-safe."
Tricks
If you want to use non-browser-safe colors but also ensure best quality for 8-bit users, try these tricks. For html specified colors (e.g. a colored table cell or live type), test, test, test! Each browser and platform will choose a different substitute color if the specified color is unavailable to it. Pick the best compromise for all possible worlds. For graphics that use non-safe colors, pick the color that is predominate and make it transparent when you save it as a gif. Put it in a table cell that is colored the same as the color you chose to be transparent. This color will show through the graphic. This means that for 8-bit color, what would have dithered in the graphic won't show, and what is behind it will be a substituted, non-dithered solid in a browser-safe translation.
© Industry San Francisco. All rights reserved. Article content may be quoted only with attribution. www.industrious.com . . .
