Follow Techotopia on Twitter

On-line Guides
All Guides
eBook Store
iOS / Android
Linux for Beginners
Office Productivity
Linux Installation
Linux Security
Linux Utilities
Linux Virtualization
Linux Kernel
System/Network Admin
Scripting Languages
Development Tools
Web Development
GUI Toolkits/Desktop
Mail Systems
Eclipse Documentation

How To Guides
General System Admin
Linux Security
Linux Filesystems
Web Servers
Graphics & Desktop
PC Hardware
Problem Solutions
Privacy Policy




Grokking The Gimp
Previous Page Home Next Page

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 28=256 colors simultaneously.

Alternatively, a system that is using 2 bytes (16 bits)  per pixel can display 216=65,536 colors, and 3 bytes (24 bits)  per pixel can display 224=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

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
Figure 9.24

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.

Grokking The Gimp
Previous Page Home Next Page

  Published under the terms of the Open Publication License Design by Interspire