![]() |
![]() |
![]() |
Color on-line | 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. |
![]() Thanks to Lynda Weinman, you can download this nondithering palette for Mac or Windows here.
|
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 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. |
|
Send Adobe your feedback!
Copyright © 1998 Adobe Systems Incorporated. |