9.5 Web-Safe Color

A problem with the exchange of images on the Internet is that not all computers have the capability of displaying a large number of colors simultaneously. For example, a computer using a display resolution of $1024\times 768$ and using 1 byte (8 bits)  of color per pixel requires at least 0.786 Mb of RAM on the video adapter card. Such a system is capable of displaying only 2⁸=256 colors simultaneously.

Alternatively, a system that is using 2 bytes (16 bits)  per pixel can display 2¹⁶=65,536 colors, and 3 bytes (24 bits)  per pixel can display 2²⁴=16,777,216colors. Thus, the available color palette grows significantly on a 16 bits-per-pixel (bpp) system. A 24 bpp system is known as a true or high color system. However, the demands on the video adapter for these systems also grows. A 16 bpp system on a $1024\times 768$ pixel display requires about 1.6 Mb of video RAM and a 24 bpp system requires 2.4 Mb.

Many video adapter cards have only 1 Mb or less of RAM. Although this is less and less common with current computers being delivered with up to 32 Mb of video RAM, there are still many legacy machines that have smaller quantities. The consequence is that an image containing more than 256 colors cannot be faithfully displayed on machines with only an 8 bpp color depth. Some of the original colors in the image will have to be replaced because of the lack of a sufficient number of available colors on the displaying system. This replacement creates color distortion in the displayed image.

The GIMP uses 24 bits per pixel to represent color, 8 bits for each of the R, G, and B channels. Thus, the GIMP can easily generate images that have color distortion when displayed on low color systems. This is a concern for the Web designer who wants to ensure an accurate representation of color for his or her graphics. This section discusses the issues of preparing web-safe color graphics and how to achieve this in the GIMP.

      
9.5.1 Types of Color Distortion

Color distortion occurs when the monitor is already displaying all the colors it can, and a request for a new color is made. The least sophisticated way of handling this request is by color clipping.   This approach displays new colors using the closest color from the palette already being displayed. For images with subtle color shading, this can give rise to banding , which is also called posterization . An example of this type of color distortion is shown in Figure 9.23.

  

Figure 9.23: Clipping and Dithering Color Distortions

Figure 9.23(a) shows the original image and Figure 9.23(b) the same image on a system with insufficient colors. You can plainly see the banding of colors in this image.

The other type of color distortion is called dithering . Although dithering is a color distortion, this is not a bug, it's a feature! Dithering is a technique used to simulate unavailable colors by spatially mixing the available ones as a mesh of small dots. The idea is that color dithering is more visually acceptable than color banding. Figure 9.23(c) illustrates the effect of dithering. Figure 9.23(f) shows a zoomed version of Figure 9.23(c) so that you can see the mix of small dots used to simulate unavailable colors. Compare this zoomed image with the zooms of the original and color clipped images shown in Figure 9.23(d) and (e), respectively.

Figure 9.23 shows that dithering is a much more sophisticated approach to the problem of color distortion than is banding. For continuous gradients of color, the rule seems to be that the dithering approach is superior. However, there are caveats to this rule. To see why, you need to understand how dithering works. A simple illustration is shown in Figure 9.24, where

  

Figure 9.24: Illustration of Using Dithering to Simulate a Color

a crude dithering scheme is employed using the Checkerboard   plug-in (found in Image:Filters/Render/Pattern menu). The Checkerboard dialog is shown in Figure 9.24(b). This plug-in creates a checkerboard pattern in the active layer using the colors specified by the Active Foreground Color and the Active Background Color. Figure 9.24(a) shows that these colors have been set to red and green.

Figure 9.24(b) shows that a 1-pixel check size is being used by the Checkerboard plug-in. The result is a simulated dither of the color yellow, as you can see in Figure 9.24(c). That the resulting dithered color is yellow follows from the discussions of the RGB colorspace in Section 5.1. The vector sum of red and green in the RGB cube yields yellow.

A zoomed version of Figure 9.24(c) is shown in Figure 9.24(d). This plainly shows the red and green checks. For comparison purposes, a pure yellow is shown in Figure 9.24(e). The example shown in Figure 9.24 is exaggerated because it is never necessary to dither two colors as distant from each other in the color cube as are red and green. However, it nicely illustrates how dithering works.

The dithering algorithms used in the GIMP are far more sophisticated than that illustrated in our checkerboard example. In the GIMP, several dithering algorithms are available including the Floyd-Steinberg algorithm.  The main feature of Floyd-Steinberg dithering is that it uses a pseudo-random spatial distribution of up to three colors to simulate an unavailable color. Figure 9.23(f) clearly shows the pseudo-random nature of Floyd-Steinberg dithering. In many cases, it is this pseudo-random aspect of Floyd-Steinberg dithering that improves the overall perception of a dithered color image...but not always. See Section 9.5.4 for more on this subject.

     
9.5.2 Low-Color Systems and Web Browser
Color Palettes

A low color system provides only 8 bits of color per pixel, which allows only 256 colors to be simultaneously displayed. When used on low-color systems, Web browsers must choose how to represent unavailable colors. Browsers such as Netscape Navigator and Internet Explorer use color palette systems that are similar but not identical. The colors that these two browsers have in common are known as the web-safe color palette [12]. Any designer that is concerned with avoiding color distortion must be aware of this special palette and how to use it.

The web-safe color palette consists of combinations of the six values 0, 51, 102, 153, 204, 255 in each of the three colors red, green, and blue. Thus, using notation introduced in Section 5.1, 51^R 204^G 153^B is a color from the web-safe color palette, and 52^R 204^G 153^B is not. The total number of colors in the palette is 6³=216. The reason six values are used is because seven would create too many colors for a low-color system (that is, 7³=343). What happens to the remaining 40 colors available on a low color system? They are used for system specific colors, and these uses differ for Mac and PC and for Netscape Navigator and Internet Explorer. The bottom line is you can't rely on them.

If you are using the GIMP's drawing and painting tools to create graphics from scratch and you desire the result to be web-safe, it would be useful to have a palette of the 216 web-safe colors to work with. You could use this palette to select the colors for your graphics, knowing that the result will be the same on most all systems, low color or not. The GIMP has a variety of predefined color palettes available in the Color Palette dialog found in the Image:Dialogs/Palette menu or which can be obtained by typing C-p in the image or toolbox windows.

Of interest is the GIMP's Web color palette  shown in Figure 9.25.

  

Figure 9.25: Web-Safe Color Palette

The Web palette illustrates the 216 web-safe colors that can be used on low color systems without fear of color distortion. However, because the colors are disorganized in this palette, it is of limited use as a tool for creative design. A palette that organizes colors by hue, saturation, and value would be much more useful.

The VisiBone palettes at http://www.visibone.com/swatches are just such tools. The VisiBone2   palette is illustrated in Figure 9.26.

  

Figure 9.26: The VisiBone2 Web-Safe Color Palette

The VisiBone2 palette has exactly the same web-safe colors as the GIMP's Web palette, but the advantage is that its colors are organized into a logical color wheel. It is much easier to pick out colors of common hue, saturation, and value with the VisiBone2 palette than it is for the Web palette.

       
9.5.3 Converting to Indexed Color

For display on 8-bit (low-color) systems, the best way to control the color in an image is to convert it to Indexed format. Figure 9.27(a)

  

Figure 9.27: The Indexed Color Conversion Dialog

illustrates the Indexed Color Conversion dialog which is invoked by the Indexed  function found in the Image:Image/Mode menu.

The dialog allows the choice of three types of palettes. The first option, Generate Optimal Palette, is based on the colors actually in the image. The number of colors used in this palette can be specified up to a maximum of 256.

The second option, Use Custom Palette, allows you to select from a large collection of palettes including user-defined ones. The names of the GIMP's standard palettes are shown in Figure 9.27(b) and (c). The default custom palette, Web, is optimized for display on low-color systems using browsers such as Netscape Navigator or Internet Explorer. This consists of the 216 color, web-safe color palette illustrated in Figure 9.25. Choosing this option guarantees that the resulting indexed image will display with the same colors on almost all systems.

The final palette option choice, shown in Figure 9.27, is the Use Black/White (1-bit) Palette. This option converts the image to a true black and white (no grays) Indexed format.

The second area in the Indexed Color Conversion dialog is for dithering options. The following are the choices:

• No colour dithering
• Positioned colour dithering
• Floyd-Steinberg colour dithering (reduced colour bleeding)
• Floyd-Steinberg colour dithering (normal)

Normal Floyd-Steinberg dithering is the default. Some experimentation might be necessary to find the best conversion to Indexed, especially if the image consists of smooth color variations and large solid color regions. Read on!

   
9.5.4 What Is the Best Choice?

Given that the designer chooses to limit the color palette to one that is web-safe, converting to Indexed format still requires making choices about the type of color distortion that is acceptable when it can't be avoided. Usually the choice depends on the type of image to be displayed.

If the image is a photograph, or one that has smooth color variations, chances are good that there are more than 256 colors in the image, and many will not be from the web-safe palette. Normally the color distortion to photos on an 8-bit display is not noticeable, and it could be argued that it is fruitless to convert the image to an Indexed format under these conditions. However, when photographs are mixed with other graphic materials the argument is no longer valid. Under these circumstances, the best choice is to dither. This is illustrated in Figure 9.28.

  

Figure 9.28: Choosing the Type of Color Distortion for Images with Smooth Color Variations

Figure 9.28(a) shows a splash screen used with version 1.0.4 of the GIMP. A dithered version of the splash screen, obtained using the web-safe color palette, is shown in Figure 9.28(b). A color clipped version of the splash screen using the same palette is shown in Figure 9.28(c). Due to the heavy banding seen in Figure 9.28(c), the color distortion due to dithering, seen in Figure 9.28(b), seems much more acceptable. This example shows that for images with smoothly varying color, the dithered solution is better because clipping   gives rise to a strongly objectionable color distortion.

If the image is not a photograph and does not have smoothly varying variations in color but rather large regions of constant color, the strategy is completely different. This is illustrated in Figure 9.29.

  

Figure 9.29: Choosing for Images with Large Uniform Color Regions

Figure 9.29(a) shows a graphic design celebrating the $150^{\mbox{th}}$ anniversary of the creation of the U.S. Department of the Interior. This design is constructed of four main colors: black, white, a blue consisting of 46^R 110^G 207^B, and a yellow consisting of 241^R 214^G 47^B. There are other colors in the image, but they are there for antialiasing  (see Section 3.1.2) and sharpness (see Section 6.4.1). From the previous discussion, you can see that the blue and the yellow are not from the web-safe palette, which only take RGB components from the set of values [0, 51, 102, 153, 204, 255]. This means that some color distortion will be introduced if the image is saved to Indexed format with the web-safe palette. Indeed, Figure 9.29(b) shows the result of applying Floyd-Steinberg dithering, and Figure 9.29(c) shows the result of color clipping.

The dithering in Figure 9.29(b) produces a very undesirable effect. The blue and yellow regions both suffer from unsightly color speckle. On the other hand, the color clipped version in Figure 9.29(c) produces a blue and a yellow that are slightly different than those of the original. Nevertheless, it is likely that this result is preferable because it preserves the homogeneity of the large, uniform color regions.

In conclusion, images that have a lot of detail and subtle color variations are better served by dithering than color clipping. Alternatively, images that have broad uniform color regions should avoid dithering and use color clipping. For images that consist of a mix of the two conditions, some experimentation is necessary. Unfortunately there are sometimes no easy choices.

©2000 Gimp-Savvy.com