General Graphics Tutorials -- Color part II |
|
This is kind of an ambitious undertaking for me. Normally I try to keep the size of tutorials down to a few pages at most (this one was over 20 pages in Word!). Unfortunately, color is a difficult and rather lengthy topic even where web graphics are concerned. I hope you won't find this tutorial too long-winded and that you'll find it a welcome reference.
--tmc
Color part II
Color Depth
Color depth is a way of describing how many colors your hardware and software are capable of displaying. The buzzwords most often used are 8-bit (256 colors), 16-bit (64,000 colors), and 24-bit (16 million colors). Of course, color depth is sometimes described by the actual number of colors being displayed such as 256 colors or 16.7 million colors.
| Number of bits | Number of colors |
| 8 | 256 |
| 16 | 64,000 |
| 24 | 16.7 million |
Hardware is the real determining factor. Your web browser, for example, will display only as many colors as your system can use. For example, if you have a graphic that contains 16.7 million colors but your hardware is capable of displaying only 256, then your browser will likely dither the number of colors down to the default browser palette (this is often not pretty).
The next limiting factor is the type of image being displayed. GIFs are capable of displaying only 256 separate colors. These colors can, however, be chosen from all 16.7 million available colors. JPGs can display up to 16.7 million colors. This makes the JPG format a popular choice for photographs and other real-world images as we'll see in a later tutorial "Creating a Successful Image".
8-bit
8-bit or 256 colors is what many systems use although they are often capable of displaying more. Sometimes referred to as VGA (Video Gate Array), 8-bit is somewhat limited. With your system set to 8-bit you're at the mercy of your browser software as we'll see later in the section on palettes.
16-bit
16-bit color, often referred to as hi-color, is a good choice if your system's video memory is limited. Using 16-bit color is a great compromise between screen resolution and color. With 16-bit color up to 64,000 colors are possible (65,536 actually).
Q&A: Where does the number 65,536 come from?
The number 65,536 is the number you'd get if you raised 2 to the power of 16. i.e. 16-bits = 2 possibilities (on and off or 0 and 1) and 16 bits. Likewise 2 raised to the power of 8 yields 256 colors = 8-bits. Finally 24-bit = 2 raised to the power of 24 = 16.7 million colors.
With 64,000 colors your web viewing experience will be much more enriched. Using this color depth will reduce the need for dithering.
Dithering, a process used to fool the eye into seeing more colors than are actually available, is discussed in depth in general tutorial 1.
24-bit
24-bit is the best color depth to use when creating and viewing computer images. Using 24-bits, for example, gives the best results of gradients and smooth tonal changes.
Note that color resolution doesn't really correspond to how big an image will be or how long it'll take to download. The deciding factor will be which compression method you choose. i.e. GIF or JPG. The pros and cons of these two methods will be closely examined in a future tutorial.
 |
figure 3.4
24-bit black-to-white gradient |
 |
figure 3.5
Black-to-white gradient as Indexed image (8-bit web palette) |
 |
figure 3.6
Black-to-white gradient as dithered, Indexed image (8-bit web palette) |
For a quick visual reference to what we've been discussing look at figures 3.4 to 3.6.
Figure 3.4 is a 24-bit gradient from black to white. Notice the smooth transition from black to white.
Figure 3.5 is the same image converted to 8-bit using the web palette. See how the smooth gray levels have been transformed into a limited number of shades of gray. This is due to the small number of grays available in the web palette.
Figure 3.6 is what you'd get by having the software dither the image as it changes its bit depth from 24-bit to 8-bit. This can be used as a solution to the banding that happens when certain colors aren't available in the palette that you're using.
Even with these black and white images you can see how the higher bit depth is better.
Now that you have an understanding of color depth it's time to look at palettes.
Be sure to check out some of our other general graphics tutorials.
|
|
|
|
|
|
We'd like to hear from you... If there are any web graphics techniques you'd like to see covered, send us an e-mail.
|
