Book HomeWeb Design in a NutshellSearch this book
PreviousWeb Design in a Nutshell, 2nd EditionNext

22.2. Converting to the Web Palette

Designing with web colors is one method to prevent dithering. The other opportunity is to add (or preserve) web-safe colors in the conversion process from RGB to Indexed Color. As part of this process, you will be asked to select a palette for the image. The colors from the palette will be used to approximate the full color range from the original RGB graphic. See the sidebar "Common Palettes" for descriptions of palette options in popular graphics programs.

Common Palettes

All 8-bit Indexed Color images (such as GIF or PNG-8) use a palette of colors to define the colors in the image. The web palette is just one of infinite palette possibilities. There are several standard palettes you can choose from within popular graphics programs.

Exact

If the image contains fewer than 256 colors, choosing the Exact palette option makes a palette out of the actual colors that are found in the image.

Adaptive

This is a custom palette generated with the most commonly used pixel colors in the image. It allows for color-depth reduction while preserving the original character of the image. Because the number of colors is being reduced, some dithering and color-shifting will occur.

Perceptual (Adobe Photoshop/ImageReady only)

This creates a custom palette by giving priority to colors for which the human eye has greater sensitivity. Unlike Adaptive, it is based on algorithms, not just a pixel count. It generally results in images with better color integrity than adaptive palette images.

Selective (Adobe Photoshop/ImageReady only)

This is similar to Perceptual, but it gives preference to areas of broad color and the preservation of web-safe colors. It is the preferred palette for web graphics created with Photoshop/ImageReady.

WebSnap Adaptive (Macromedia Fireworks only)

An adaptive palette in which colors that are near in value to web palette colors are converted to the closest web palette color.

System (Mac/Windows)

Choosing either system palette converts the image to the palette of 256 colors as defined by each operating system.

Uniform

This palette contains an evenly stepped sampling of colors from the RGB spectrum.

Custom

This allows you to load a palette that was previously saved and apply it to the current image.

Optimized Median Cut (Paint Shop Pro only)

This reduces the image to a few colors using something similar to an adaptive palette.

Optimized Octree (Paint Shop Pro only)

Use this palette if the original image has just a few colors and you want to keep those exact colors.

22.2.1. Applying the Strict Web Palette

In current graphics tools, one of the palette options is likely to be "Web" or "Web216," which means that the resulting 8-bit image will be made up exclusively of colors from the 216 color web-safe palette. Many beginners make the mistake of applying the web palette to every graphic that is going on a web page. While "Web" may seem like the logical palette choice, it isn't appropriate for most images and can reduce potential quality.

The problem with applying the strict web palette is that it doesn't take into account the colors or content of your original image -- everything will be forced into web colors. Extra dithering may be introduced in the conversion which may increase file size. The web palette is also made up of some fairly strange and extreme colors that won't do your image any favors.

22.2.2. "Snapping" to Web Colors

The newer graphics tools (Fireworks and Photoshop 5.5+/ImageReady) offer more sophisticated methods for applying and preserving web-safe colors in the conversion process. Instead of changing all the pixel colors in the image, these tools find the colors that are close in value to web-safe, and then shift (or "snap") them to their nearest web-safe neighbor. The snap feature is especially effective for images that contain a combination of full-color photographic images and flat, web-safe colors.

22.2.2.1. Macromedia Fireworks

Fireworks gives the option of saving with the "Web Adaptive" palette. It is an adaptive palette, so the set of colors will be customized for the image, but any colors that are near in value to web palette colors will shift to the closest web safe equivalent. A color shifts if it is within 7 bits of a web safe value (e.g., 57-57-57 shifts to 51-51-51, but 60-57-57 does not). There is no way to adjust this tolerance. Palettes are chosen from the Optimize palette (Figure 22-2) or the Export Preview dialog box.

Figure 22-2

Figure 22-2. Palette options in Fireworks' Optimize palette

22.2.2.2. Adobe ImageReady (Photoshop 5.5 and higher)

In ImageReady (and within Photoshop 5.5+ using the "Save For Web" feature), you can control how many colors shift to their nearest web-safe neighbor using the "Web Snap" slider tool (Figure 22-3, left). The higher you set the slider, the more colors shift. This allows the tool to construct a custom color table for the image while keeping areas web-safe. (You may need to select "Show Options" using the small arrow button in the top-right corner to expose the Web Snap slider in the Optimize palette.)

The slider works in coordination with one of the adaptive palette choices ("Adaptive," "Perceptual," or "Selective"). If your image contains broad areas of flat color, particularly web-safe color, "Selective" is the best choice. If the image is mostly photographic, use "Perceptual."

ImageReady also allows you to shift colors to their nearest web equivalents manually using the Color Table palette (Figure 22-3, right). Clicking on a color in the table and then the cube icon below shifts it to web-safe (indicated by a diamond in the center of the swatch). This shifts all the corresponding pixels within the image. The color can then be locked down with the lock icon.

Figure 22-3

Figure 22-3. ImageReady's Optimize options (left) and Color Table palette (right)

22.2.2.3. Web Scrubber plug-in filter (Furbo Filters)

If you work on a Mac and haven't yet invested in a web graphics tool such as ImageReady or Fireworks, you can lay out a smaller chunk of change for special web utilities that work as plug-ins for PaintShop Pro, Photoshop 3+, or any program that accepts Photoshop-compatible plug-ins.

Web Scrubber from Furbo Filters provides "web-snap" abilities similar to ImageReady and allows you to reduce the number of colors in a paletted image. It is particularly good at optimizing images that contain a combination of photographic imagery and areas of flat, web-safe color.

As of this writing, Web Scrubber is available only for the Mac as part of Furbo Filters' Webmaster series of plug-ins. These plug-ins are available at http://www.furbo-filters.com.

PreviousHomeNext
22. Designing Graphics with the Web PaletteBook Index22.3. Web Palette Strategies
Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.