Color on the Web

By Lisa Lopuck
-Reprinted from Adobe Magazine

----------------------------------------------------------------

Imagine this: you've just designed a beautiful World Wide Web 
site only to find that it gets terribly dithered - that weird 
pointillism look - on some of your friends' Macs and PCs. All 
too familiar? It seems the question of the day is, how do you 
create Web graphics that look great and are dither-free on 
both platforms?

Fortunately, it's not hard to create dither-free Web images if 
you know how to manage color palettes, and Adobe(R) 
Photoshop(R) can help you do just that. But before Photoshop 
can work to any avail, you must first understand color on-line,
what color depth is, and how color palettes work. This article 
explains the basics. Then we'll explore the special 
"dither-free Web palette" and how to use it in Photoshop. 
Finally, we'll explain how to choose between the JPEG and GIF 
formats for the best color fidelity in various situations.

----------------------------------------------------------------

Color on-line

Before you start creating images for the World Wide Web, you 
need a basic understanding of how computers define and display 
color. The explanation that follows is a little thick, but 
understanding this stuff will really help you design 
good-looking graphics for the Web.

Color bit depth. 
Your computer monitor displays color by mixing various 
intensities of just three colors of light: red, green, and 
blue. For each color, your computer may be able to display up 
to 256 possible intensity values, depending on how many bits it 
uses to define each level of red, green, and blue (a bit is the 
smallest unit of data a computer manages - each bit is the same 
thing as a one or a zero). When your computer defines red, 
green, and blue in terms of 256 levels each, it's using 8 bits 
of data for each color channel. And, with each of three 
channels using 8 bits of data, you've got a total of 24 bits of 
data (3 x 8 = 24), hence the term 24-bit color. 

Not all monitors can display 24-bit color, but the ones that 
can are capable of displaying the full-color detail of 24-bit 
RGB images, which can contain as many as almost 17 million 
different colors (16,777,216 to be exact). The result can be 
vibrant, continuous-tone, photographic-quality display. 
Nevertheless, 24-bit images pose certain problems for the 
World Wide Web.

If you're not sure how many colors your monitor displays, try 
this: If you use Windows(R), look in Windows Setup (for Windows 
3.1) or Display Properties (Windows 95), to find what video 
driver you use; many of them indicate how many colors they 
support. But if you're still not sure about it, contact your 
video-card manufacturer for more information. If you use a 
Macintosh(R), take a look at your Monitors Control Panel - 
it'll tell you if you're running at 256 colors, thousands of 
colors (which is the same as 16-bit color), or millions (which 
is 24-bit color). Since 24-bit images contain so much color 
data, they make relatively big files and can take a long time 
to download. In addition, not all monitors can display the 
full-color detail of 24-bit images. Many monitors display only 
16-bit or 8-bit color (65,536 or 256 colors, respectively). 
When you look at a 24-bit image on a system that can display 
fewer colors, that system will handle colors it can't display 
accurately by dithering them. (What's dithering? Imagine 
trying to illustrate an orange, but all you have is red and 
yellow pens. You'd have to put little dots of red and yellow in 
close proximity to simulate the missing orange color.) Of 
course, not all images are 24-bit; 8-bit images are also 
commonly used on the Web (GIF images always use 8-bit color or 
less), so you should be familiar with them as well. Eight-bit 
images use a palette of 256 or fewer combinations of red, 
green, and blue. An 8-bit image is, by definition, one that is 
made up of a palette of no more than 256 colors. And an 8-bit 
video-display system is one that uses a set palette of 256 
RGB colors.


Palettes and dithering

"Okay," you might be thinking, "but what 8-bit palette? What 
set of 256 colors does the monitor use?" Each platform, Windows 
and Macintosh, has a default set of 256 colors, called the 
system palette, that does a fairly good job of representing 
24-bit images. When Web browsers such as Netscape(TM) and 
Microsoft(R) Explorer detect an 8-bit display system, they will 
force an image - dithering it as necessary into their own 8-bit 
palettes, which are different from the host palettes.

Windows vs. Mac(R) system palettes. 
The Windows and Mac browser palettes are slightly different - 
they share only 216 out of 256 colors. This means that if, for 
example, you use the Mac system palette for an image, any of 
the 40 nonshared colors you use will be dithered when the image 
is viewed on an 8-bit Windows browser. The difference is not 
monumental, especially when viewing photograph-like images, but 
it is something to be aware of when working with flat-color 
areas and elements (in other words, areas of solid, undithered, 
ungradated color) such as backgrounds, type, and line art such 
as cartoons - dithering such elements can be very unattractive.

The nondithering Web palette. 
The 216 colors that are shared between the browser palettes 
won't dither from platform to platform. Therefore, you should 
use these colors for all the flat-color areas of your Web 
graphics. Thanks to Lynda Weinman (see her Web site at 
http://www.lynda.com/) you can download this nondithering 
palette for Mac or Windows here and then load it into the 
Photoshop Swatches palette to use as you work. (Lynda Weinman's 
recently released book from New Riders, Designing Web Graphics, 
also offers detailed information on Web color-palette issues). 
For a comparison of the Mac browser palette and the 216-color 
palette, see http://www.sirius.com/~industry/consider.html.


Palette and file-format strategies

Dithering of 24-bit, photograph-like images is unavoidable on 
systems that display at less than 24-bit color depth - and 
that's okay. The subtle color transitions created by natural 
lighting and shading effectively conceal most dithering in such 
images. But dithering, as mentioned before, isn't okay in 
flat-color areas of synthetic images. Therefore, you'll need a 
strategy for handling color in your Web images, and your 
strategy must address what file format to use. Here's what 
I recommend:

Choosing a file format for Web graphics. 
There are two graphics file formats that you will be working 
with for the Web: GIF (the graphic interchange format 
originally developed by CompuServe as a way to store images in 
small, easy-to-download files) and JPEG (which stands for Joint 
Photographic Experts Group, and was developed as a way to 
achieve high levels of compression in photographic-type images 
without visibly compromising image quality). 

The GIF format works only for 8-bit (or less) images, while the 
JPEG format was developed specifically to compress 24-bit 
photographic-type images. JPEG does not work for images less 
than 24-bit, and it does not work well for nonphotographic 
images such as illustrations and line art. If your primary 
audience has 24-bit displays, you may consider using JPEG for 
photographic-type images.

Using JPEG. 
The JPEG format compresses 24-bit images just as well as the 
GIF format compresses 8-bit images in terms of file size. The 
drawback, however, is that while these 24-bit JPEG images look 
great on 24-bit monitors, on 8-bit monitors they are 
force-dithered into the host's operating system palette. At 
that point, you lose control over the dithering process, even 
if you prepared for it by filling flat areas with colors from 
the 216-color palette. This is because the JPEG compression 
process introduces noise (dithering) into solid-color areas. 
This can muddy synthetic-type images and even make them look 
blurry. Therefore, don't use the JPEG format with flat-color 
art, type, or images with sharp, well-defined edges.

JPEG offers several compression levels. The more you compress 
your JPEG image, the smaller the JPEG file will be, but the 
more image detail you'll lose (and this loss is permanent - you 
can't get the detail back by saving the image at a different 
compression level). The only way to determine which compression 
level will work for a particular image is through 
experimentation. So try this: When you use the JPEG format, 
make a few copies of your final 24-bit image and save them each 
at a different compression-quality setting. Once you have 
entered a setting, you'll need to close the file and then 
reopen it in Photoshop to see the result. Compare the versions 
and use the most compressed image that doesn't have a 
noticeable amount of detail loss.

Using GIF. 
If you aren't working with 24-bit photographic-type images, 
you'll probably want to use the GIF format for your Web 
graphics. Here are some ways to get the best results from 
that format.

First, fill all of your flat-color areas with colors from the 
216-nondithering-color palette. Using other colors in nonflat 
areas of your image should be fine - they'll dither on some 
systems, but it shouldn't be too noticeable. And, if you do use 
some of the 40 system-palette colors not shared by both 
platforms, those colors won't dither on at least some of your 
readers' systems (computers with 24-bit displays or with the 
operating system that includes those colors in its 
system palette).

The GIF format does a good job compressing images, but it can 
do an even better job if you design your graphics with the 
GIF's compression system in mind. The GIF format compresses 
graphics by looking at each horizontal line of pixels and 
recording the color changes. If there is one solid color that 
runs the length of a horizontal row of pixels, there's less 
detail to record. Therefore, the fewer color changes per 
horizontal row of pixels, the smaller your GIF file - and the 
faster it downloads. So, when possible, don't introduce extra 
vertical detail or noise into GIF images if you're concerned 
about file size and download times. For instance, if you're 
going to use stripes or a gradation in your image, make the 
stripes and the gradation run horizontally instead 
of vertically. 

Using adaptive-palette GIF. 
Finally, there's another file-format/palette combination you 
might want to consider for some of your images - 8-bit 
adaptive-palette GIF. An adaptive palette is composed of 256 
colors that are most common to the image, rather than the 
default system set of colors. On a 24-bit display, an 8-bit 
adaptive-palette image looks nearly 24-bit in quality. On an 
8-bit display, however, browsers will remap the 8-bit adaptive 
palette into the host operating system's system palette. More 
often than not, the result is acceptable. When indexing the 
image into an adaptive palette, try a 7-bit/pixel or lower 
setting. This makes the image that much smaller in file size, 
and often it looks just as good.

To reduce a 24-bit image into a system or adaptive palette in 
Photoshop, select the Index Color option from the Mode menu. 
When the Indexed Color dialog box appears, choose the
8-bits/pixel resolution option, and then select the System or 
Adaptive palette option. Finally, select the Diffusion dither 
option and click OK. 

Adaptive-palette GIF vs. 24-bit JPEG. 
If you have a photographic-type image you want to use on the 
Web, you can either save it in JPEG format, or you can consider 
saving it as an adaptive-palette GIF. Either way, the image 
will dither on display systems that offer less than 24-bit 
color depth. But there are some different advantages to either 
option. With JPEG, your image may retain the greatest color 
integrity, and readers with 24-bit display systems may be able 
to notice the difference. On the other hand, if you go with an 
adaptive-palette GIF instead, you'll be able to take advantage 
of some of the GIF file format's perks: transparency and 
interlacing, for example. (Sometime in the not so distant 
future you may be able to get interlacing JPEG images, 
too - the "progressive JPEG" format, due out soon, will 
support this.) GIF still might be a better choice if your image 
contains flat-color areas, type, and well-defined edges (the 
JPEG format and its built-in compression scheme can muddy or 
dither such elements).

Design in 24-bit. 
Whether you plan to use the JPEG format, GIF, or 
adaptive-palette GIF, always do your design work in 24-bit 
(RGB) mode - reducing the palette is the last thing you should 
do. In addition, always save the dithered version separate from 
the 24-bit Photoshop original. You never know when you will 
need to go back and make changes.

Learning how color palettes work on the Web is important if you 
want to get the most out of Photoshop software's Web-image 
creation capabilities. And if you combine that understanding 
with all of Photoshop Web-savvy features (like image-preview 
capabilities, support for GIF and JPEG, and extensive 
color-palette and color-depth controls), you'll be able to 
create Web graphics that look great on both Windows and the 
Mac, plus a variety of monitors.

----------------------------------------------------------------

Lisa Lopuck is the author of Designing Multimedia (Peachpit 
Press) and a founding partner and creative director of Electra 
(http://lmdesign.com/electra), a multimedia and Web-site design 
firm located in San Francisco. In early June she was a featured 
speaker at the Adobe Internet Conference in San Francisco.

Note: This article originally appeared in Adobe Magazine, 
(May/June 1996, page 49). Sign up for a free subscription, 
or call 206-628-2321. Article copyright 1996 
Adobe Systems Incorporated. 
