Web Design: Be Mindful of Monitor Color Depth - dummies

Web Design: Be Mindful of Monitor Color Depth

By Lisa Lopuck

A computer monitor has to work hard to display all the colors contained in a 24-bit image on a website. Some older or inexpensive monitors, and some devices, simply don’t have enough video memory (VRAM) to display all the color data. Therefore, although your nice computer may be able to display the millions of colors, it’s likely that some users out there have monitors and devices incapable of displaying your 24-bit graphics.

So, the term 24-bit color refers to both images and computer monitors. A 24-bit monitor can display up to 24 bits of color information. Such 24-bit monitors, often called true color monitors, give gorgeous continuous tone results when displaying 24-bit images. Most modern desktop monitors and Apple’s iPhone and iPad support 24-bit color display.

If your web audience uses older computers, certain tablets, or smart phones, however, color bit depth is something you need to be mindful of. It is possible to have a nice, millions-of-colors, 24-bit image that you can’t display properly because the monitor only supports 8-bit or 16-bit images. What happens to the image? On an 8- or 16-bit monitor, a 24-bit image is simplified into what looks like a work of pointillism art.

In the following figure, the left shows how an image would look on a 24-bit monitor, so it looks great even when you zoom in. The image on the right shows what the image looks like on an 8-bit monitor — grainy. Because an 8-bit monitor can only display 256 colors at one time, it uses the same pointillism-like approach (called dithering) used in reduced-palette images, to approximate the millions of colors in the image.


But what does an 8-bit image look like when displayed on a 24-bit monitor? When the image has already been reduced to a limited color palette, viewing it on a high-quality monitor doesn’t improve anything. If an image has been reduced to an 8-bit palette of just 256 colors, the monitor can do nothing to resurrect the lost millions of colors. The image looks dithered — regardless of the monitor’s bit depth.