Last month we looked at GIF images and Web Safe colors. We learned that Web Safe colors are called Web Safe because they will display the same on any browser on any computer platform, providing the graphics card and monitor displaying the images are capable of displaying at least 256 colors. We learned that there are only 216 web safe colors (out of a possible 256 colors), because the main operating systems, Macintosh OS and Windows, have only these 216 colors in common.

And we learned that Web Safe colors contain one of six values for each red, green and blue component, 0, 51, 012, 153, 204 and 255. I believe I left off with the promise that this month we'd continue to look at Web colors, but this time we'd move away from the safety of Web Safe colors and into the domain of Adaptive, Web-Snap Adaptive, System (Mac and Windows) and more.

We'll use Photoshop 5.5 to explore these alternative palettes and attempt to see if we can figure out which palettes work best with which images.

You Say Banana, I Say Bah-nah-nah!

I've always called them color models. Adobe now calls them Color Tables and who am I to argue? Adobe offers us seven Color Tables including Web Safe, which we looked at last month. The differences between these Color Tables can be pretty subtle, as can the results achieved when using them.

But before we look at these Color Tables, let's examine the reasons we might want to stray from the relative safety of the Web Safe palette. As you remember, Web Safe colors address the lowest common denominator-monitors that can only display 256 colors at one time. And believe it or not, there are still a lot of these in use. So the first question you need to address is for whom are you designing your images? If you are designing for the greatest possible number of people using the widest range of technology, then the Web Safe route is a pretty safe bet.

With the availability of cheaper computers equipped with more power, better monitors, faster processors and so forth, more and more people are power-surfing the Web in style. It's not uncommon today to find even the cheapest computers equipped with 8 MB of video RAM, more than enough to display 16.7 million colors at very high screen resolutions. So why not just make all our images JPEG images and be done with it? As you will see, color depth is just one of the many considerations we need to address.

So, What's On The Table?

Before I digressed, I mentioned that Photoshop 5.5 gives us seven Color Tables to choose from when creating JPEG, GIF or PNG images. Whoa, wait a minute. Where's this PNG come from? Briefly, PNG (pronounced PING and standing for Portable Network Graphic) is a graphic file format that shares qualities in common with both GIF and JPEG files, and is going to be the third file format found on the Web. PNG comes in both an 8-bit version (similar to GIF), and a 24-bit version (similar to JPEG). Unlike JPEG, PNG supports an alpha channel for transparency and does not discard image data when compressing a file. However, as most older browsers do not support PNG files, we're going to skip this file format and concentrate on GIF and JPEG images. Here are the seven Color Tables along with a brief description of each:

Perceptual selects colors for which the human eye has more sensitivity. What I think this means is that out of the 256 possible colors, these are the ones for which we have the greatest ability to discern the differences.

Selective is the Photoshop and ImageReady default option for Color Tables and produces images with the greatest color integrity. Similar to Perceptual, Selective concentrates on broad areas of color and attempts to use Web Safe colors as much as possible.

Adaptive builds the best palette of colors based upon the selected image. An image with a predominance of red for example, will have more variations of red than any of the other Color Tables.

Web is the Web Safe palette. All colors are composed of one or more of the 216 Web Safe colors. While the image quality is not as good as the other tables when used with photographic images or images with subtle gradients, the resulting image will appear about the same on all computer platforms.

Custom preserves the settings for the selected Color Table and does not change when the image is modified.

Mac OS uses up to 256 colors that are the default system colors on the Macintosh platform. 216 of these colors are Web Safe, the remaining 40 are not. This is good palette to use if you are preparing images that will only be viewed on Macintosh computers, such as on a company Intranet, with a limitation of 256 colors.

Windows is the default 256 system colors for the Windows platform. As with the Mac OS Color Table, this is a good palette to use if you are creating images that will only be viewed on Windows computers but must be limited to 256 colors.

In addition to these Color Tables, you can create your own Color Tables, name and save them, and apply these custom settings to other images.

Decisions, Decisions

Adobe has seen the handwriting on the wall. Or to be more precise, the handwriting on the Web. Photoshop 5.5 comes bundled with ImageReady, Adobe's Web image-creation application. The two applications work hand in glove to the point where the look and feel is so similar that it is not always possible to tell which application you're in. A small icon at the bottom of the standard tool palette toggles back and forth between applications. While both applications share many of the same features, Photoshop is better for image editing and color correction operations while ImageReady is better for Web-specific tasks, such as image slicing, creating animations, and JavaScript rollover effects. Together, they make a combination that is hard to beat.

In addition to incorporating ImageReady into the package, Photoshop 5.5 has made a heavy commitment to Web image creation. Because it is helpful, if not downright essential, to compare many different settings and Color Tables when coming up with the best balance of file size to image integrity, Adobe 5.5 has added a new Save to Web option which opens the dialog shown here. Within this window, you can experiment and compare results to your heart's content. The screen shot shown here has been reduced to less than half its size and so I shall point out the features. The tabs at the top of the screen let you see the original image only, the optimized image only, 2-up (the original image and one modified version), and 4-up (the original and 3 variations). Shown here is the 4-up screen. At the very bottom of the screen is a browser button that lets you preview an image in your choice of browsers. This is very important for Web designers who need to view an image in a variety of browser versions.

The top left image is my original TIFF image which has a file size of 190K. The other three images all use the default Selective Color Table and all use error diffusion dithering. The top right image contains 128 colors, the bottom left image contains 64 colors and the bottom right image contains 32 colors. Shown at the bottom of the three Web images are the actual file sizes, 36K, 28K, and 22.4K, as well as selectable modem speed download times, 14 seconds, 11 seconds and 9 seconds based on a 28.8K modem selection.

Each of these images can be changed in a mind-boggling number of ways to provide as many options as you have the time and desire to try. This is a Web designer's dream but not recommended for persons who overload and get the vapors from having too many options.

The panel along the right side of the window contains drop-down lists for Settings, a collection of presets for the most commonly used settings such as 128 Colors Dithered and 128 Colors Undithered. Other settings include file type (GIF, JPEG, and PNG), Color Table, Diffusion, Lossy Compression, Colors (the Auto setting automatically picks the best number of colors to render the image), Dithering Slider (higher numbers produce a smoother image but a larger file size), Matt (the option to let Photoshop antialias an image with transparency to a background color, and Web Snap percentage, which forces a selected image to use progressively more Web Safe colors. Increasing the number of Web Safe colors provides a compromise between addressing the lowest common denominator-computers with 256 color displays, and more sophisticated displays.

In this image, I selected the Web Color Table, with dithering, and let the Auto Color function create the palette of 73 colors. If I wanted to get real involved, I could display the colors by Popularity (not based on a popularity contest, but on how often each color appears in the image), and begin removing a color at a time to see the effect this will have on file size and image quality.

Pictured here are three different Color Tables - Web, Perceptual and Adaptive. The Web palette has automatically been reduced to the ideal number of colors. The dot in the center of the color swatch indicates a Web Safe color. The next palette is the Perceptual palette with the 128 colors option selected. And finally the Adaptive palette also with the 128 color option.

Here we can see the difference in the Mac OS and the Windows Color Tables. Oddly, the Mac OS palette consists of mostly Web Safe colors while the Windows palette has only two. The Mac OS palette uses 88 colors while the Windows palette settles for 80 colors. The difference in the number of Web safe colors is interesting and brings all sorts of questions to mind. None of which I can find the words to express, however.

Picture Perfect?

I saved this image with three different settings, as we shall see. The first setting uses the default Selective palette with 100% dithering and 128 colors. The file size is a bit beefy at 36K and the download time for a 28.8K modem is 13 seconds.

Reducing the number of colors by half to 64, reduces the file size to 28K and improves the download time to 11 seconds. The image quality is almost as good as the 128 color option.

Going to extremes, this version of the image was saved at 16 colors. The image quality is not as good but the file size, 14.8K and download time, 6 seconds, might compensate for the image quality. Even so, the image quality might be acceptable if several images are being used on the same page.

Too Close To Call?

The beauty of Photoshop 5.5 is that one can spend a lot of time experimenting with settings and Color Tables to establish the best balance of file size to image quality. You might also be wondering why we are not using the JPEG file format, as JPEG images are better for photographic images. At a quality setting of Medium, the file size is about the same as the 16-color GIF, 15K and the download size is the same. The solid areas of color of the JPEG image tend to get blotchy, as does the type. But the image itself is closer in quality to the 128 color GIF file. So the decision has to be made based upon which is more important, overall image quality. or cleanliness of the graphics and readability of the text.

The World Is Flat

Until now, we have been dealing with images that could go either way, GIF or JPEG. When it comes to images with large areas of flat colors, logos, charts, illustrations, text and so forth, there is only one way to go, GIF. This logo was designed using Web Safe colors. Shown here is an example using the Selective Color Table with 32 colors. The image is very crisp but the file size is 8K. We should be able to do better and still maintain the image sharpness.

This version uses the Web Color Table which automatically determined a palette of 25 colors. The image is clean and the file size has dropped to 7K.

In the quest for maximum quality and minimum file size, I used the Adaptive Color Table with 10 colors which produced an acceptable image with a file size of 6K.

As there are only a handful of Web Safe colors used in this logo, we could try using the exact number of colors. Except, the image would not look as smooth. Why? Because we need a few extra colors for Photoshop to antialias the areas of contrast in the image. Antialiasing is a process that softens the hard edge that appears between objects by creating intermediate colored pixels which reduce the jagged, pixelated appearance.

The Wrap Up

Too many choices? Might be. As I stated in Part 1, the bottom line is you have to decide who your audience is and design for them. If you are designing for the mass market, including people with antiquated computer systems and slug-like modems, then better to be Web Safe than sorry. On the other hand, if you are designing for computer savvy people with modern displays and faster modems (like us), then you'll want to consider working with non-Web Safe alternative palettes such as the ones covered here. All these adaptations of the 256-color palette make life for we Web Site Designers and Developers a little more - dare I say it? - palatable.