Return to Home Page Graphics column iconONLINE GRAPHICS AND COLOR DEPTH
 

B Y  N E I L   P E R L I N 
Boston Chapter

Welcome to Hyperviews:Online graphics column. This column describes the concepts behind graphics used in WinHelp and HTML-based help and documentation. The column's goal is to present enough detail to be helpful to writers, without the level of detail expected by programmers. This issue of the column ends the discussion of basic concepts by introducing color depth and explaining its effects and importance.

Overview of Color Depth If you’ve ever heard terms like “16-color”, “256-color”, and “24-bit” used in relation to graphics, you've run across “color depth”.  But if you're new to color depth, you won't know what the numbers refer to, what the difference is between “color” and “bit”, and whether you should care.

“Color depth” describes the number of possible colors that a graphic can contain, not the number of colors that it actually does contain.  (More on this below)  Color depth is expressed by the formula 2N, where N is the bit level – the number of bits available to describe each color.  As the bit level increases, the number of colors that a graphic can contain increases exponentially, as Table 1 shows.

 

Table 1 – Bit Level and Color Depth
Bit Level
Number of Colors
1 2
2 4
4 16
8 256
16 65,536
24

16,777,216 ("Truecolor")

So a 1-bit graphic can contain up to two colors because 21 equals 2, a 4-bit graphic can contain up to 16 colors because 24 equals 16, and so on.

However, while a 1-bit graphic can contain one or two colors, it can't contain more than two colors. If a graphic requires three colors, it can't be a 1-bit graphic. It must use the next higher level – officially 2-bit or four-color but, in practice, 4-bit or 16-color. 16-color format can, in turn, contain one color, two colors, or 16 colors, but it can't contain more than 16 colors. If a graphic requires 17 colors, it can't be a 4-bit graphic. It must use the next level – 8-bit or 256 color. And so on up. Think of it as akin to working with a set of graduated measuring spoons.

(Incidentally, why do we say "24-bit" instead of "16,777,216 color"? Because it's easier to say "24 bit"; "24-bit" and "16,777,216 color" mean the same thing.)

Color Depth, File Size, and Image Quality As Table 1 shows, a larger bit level provides a wider choice of colors. And, since image quality improves as the number of colors goes up, why not use 24-bit everywhere? The reason is file size. The higher bit level means it takes more space to store data that forms a 24-bit graphic than it does to store data that forms a 16-color graphic, so the file is larger. This is true even if a graphic only has two colors – a two-color graphic stored in 24-bit form is larger than the same two-color graphic stored in 16-color. How much larger?

A 24-bit graphic is three times the size of a 256-color graphic, which is twice the size of a 16-color graphic, which is four times the size of a monochrome graphic. (Compare the exponents – 24 is three times the size of 8, which is twice 4, which is four times 1.) Table 2 shows the file size of Figure 1 at various depths.

 

Table 2 – Bit Level and File Size
Bit Level
File Size (K)
Relative %
24 178 100
8 (256 color) 60.8 34.2
4 (16 color) 30.4 17.1
1 (Monochrome) 7.65 4.3

 

As Table 2 shows, a higher bit level equals a larger file. And, since smaller files download faster, why not use the smallest number of possible colors in all your graphics? The reason is file quality. The lower the color depth, the worse the quality. To see this, examine Figures 1 through 4 and the related file sizes.
 

Figure 1 - 24 Bit (178 K)
Figure 1 – 24 Bit (178 K)		 Figure 2 - 256-Color (60.8 K)
Figure 2 – 256-Color (60.8 K)
Figure 3 - 16-Color (30.4 K)
Figure 3 – 16-Color (30.4 K)		 Figure 4 - Monochrome (7.65 K)
Figure 4 – Monochrome (7.65 K)
  • Figure 1, the original, looks fine but is far too large to download over a modem connection. 
  • Figure 2 is still too large and the quality is degrading. You can see this in the orange area on the beak and at the intersection of the yellow throat and black body.
  • Figure 3 is still too large, and the entire image is now degrading.
  • Figure 4’s size is getting reasonable but the quality makes it unusable. Or does it? Figure 4 might actually meet your needs because its starkness is unusual enough to attract attention.
What causes the loss of quality in the graphic?

When creating a graphic, you probably take advantage of your PC's capabilities – given a 24-bit PC, you'll use more colors than on a 16-color PC. But what happens when you display a 24-bit graphic on a 16-color PC? The detail is lost and the color is muddy. This is just like what happens when you reduce color depth, because you've reduced the colors available to the PC.

At 24-bit, the graphic has a million shades of green, for example, available. This range lets you create fine detail and smooth color changes by subtle changes in shade. But reducing color depth reduces the number of shades available. Adjacent areas of the graphic that used two different shades may now have to use the same one, resulting in a loss of detail and "blockiness". You can see this in Figure 5, which shows a 2X zoom of the intersection of the bird's throat and body. The left clip is from the 24-bit version, the right one from the 256-color version. Note the loss of detail and blockiness as you go from 24-bit to 256-color. The 256-color version simply has fewer colors available.
 

Figure 5 - 2X zoom comparison between the 24-bit and 256-color versions.
Figure 5 – 2X zoom comparison between the 24-bit and 256-color versions.
Summary The fact that lower color depth provides smaller files (good) but lower quality (bad) is a major issue with graphics. Much of your graphics work will consist of looking for a happy medium - a color depth that gives the highest possible quality for the smallest possible file size.
Return to Home Page Neil Perlin has nineteen years of experience in technical writing, including thirteen years in online documentation and Windows Help development, training and consulting. Neil writes about online documentation and Windows Help, and lectures frequently to computer societies and STC groups. Neil provides training and consulting on online documentation design, development, management, and debugging, through Hyper/Word Services, in Tewksbury, MA and leads seminars for Editorial Services of New England in Cambridge, MA. Neil can be reached at nperlin@concentric.net, www.hyperword.com.