Photoshop for the Web, 2nd Edition By Mikkel Aaland 2nd Edition November 1999 1-56592-641-2, Order Number: 6412 246 pages, including multipage color insert, $29.95

Chapter 3
Making Great GIFs

What's more important--a site that loads fast or a site that looks great? If you simply convert your art to a GIF or JPEG file, accept the default settings, and save the file, chances are you'll wind up with graphics that are neither good enough nor small enough.

Through the next four chapters, you'll learn tons of tricks and techniques to make the most effective web graphics with Photoshop. In this chapter, we'll deal with converting existing images to GIF. Chapter 4, Creating GIFs from Scratch, shows you how to create original GIF files. Chapter 5, Special Effects with Transparent GIFs, covers transparent GIFs. And Chapter 6, JPEG: All the Color You Want, shows you how to make the best JPEG files.

GIF or JPEG?

The primary decision you have to make for any web graphic is file format. Make the wrong choice and you'll wind up with files that are larger than they need to be and images that don't look as good as they could. Make the right choice and you'll be assured that your images load fast, look reasonably good, and work for users of all platforms and screen displays.

Although there are many graphic file formats, GIF and JPEG are the most important ones for the Web, since they are directly supported by web browsers. All versions of Photoshop will read and write the basic GIF and JPEG formats. Photoshop 4 and 5 (and earlier versions, with the help of plug-ins) will read and write later variations of the formats (such as progressive rendering for JPEGs and transparency for GIFs). Photoshop 4, 5.0, 5.02, and 5.5 offer support for PNG, a relatively new file format that is gaining widespread support (and which is discussed in more detail in Appendix A, The PNG Format ). Photoshop 5.5 offers improved PNG support.

Both the GIF and JPEG formats give you ways to control the file size of your web graphics--a critical feature considering the Web's current limited bandwidth capabilities. JPEG does this by compressing and actually throwing away data it considers unnecessary. GIF controls file size through a combination of compression and color reduction.

So, GIF or JPEG? The answer depends on the image's content and on how it will appear on your web page.

There are a number of crucial differences between the two formats:

• GIF is an 8-bit format. JPEG is a 24-bit format.
• GIF uses lossless compression (with an exception discussed later). JPEG uses lossy compression.
• GIF uses a color index. JPEG uses the full range of 16 million colors.
• GIF supports transparency. JPEG does not.

In general, GIF works better for images with flat colors and JPEG works better with photographic images, but there are many exceptions to the rule. Table 3-1 gives some general rules for when and when not to use GIF and JPEG.

Table 3-1: When to use and when to avoid GIF and JPEG

	Use for:	Avoid with:
GIF	Graphics containing limited numbers of colors, or intricate detail that you want to maintain	Large photographic images or illustrations that contain a lot of color, unless you want to create a floating effect
	Floating graphics from the page
	Creating a simple animation (with the latest GIF file format)
	Browser-safe colors--colors that won't dither or change when viewed on an 8-bit monitor
JPEG	Most photographic images and continuous-tone art that contain subtle shifts in color	Text or graphics that contain detailed edges

Those are the rules of thumb. In the real world, things are a little less cut-and-dried. Take a look at Figures C-18 through C-23 in the color insert to see some actual situations and the decisions that web designers made.

Indexing your image

The most important thing to know about GIF files is that they're indexed images. That is, the file contains an index, or a palette, of all the colors in the image. Because GIF is an 8-bit format, the maximum number of colors in a GIF file is 256. This palette is used to assign a color to each pixel in the image. Actually, each pixel is assigned an index number, and RGB color values are associated with the index number. For instance, index number 22 may be assigned a navy blue color, and number 23 may be assigned sky blue. In the GIF file format, one index number can be tagged as transparent. We'll discuss GIF transparency more in Chapter 5.

Figures C-24 and C-25 make the point. Figure C-24 shows a simple illustration created by the artist James Yang and its color index. You can clearly see how the colors in the index are displayed in the image. In Figure C-25, we have the exact same image, but a different color index. The image changes accordingly.

When you realize how the index affects the image, you can see what havoc would be created if you applied the wrong index to an image.

With Photoshop 5.5, there are three ways to index an image in preparation for the GIF file format:

• File Save for Web
• Image Mode Indexed Color
• File Export GIF89a Export module

The Save for Web feature is only available in 5.5, which also has a better Indexed Color feature than do Photoshop 4 and 5. The GIF89a Export module, which is primarily used to create GIFs with transparent areas, has remained the same since Photoshop 4.0.

Each method has its pros and cons:

• The Save for Web plug-in is Photoshop's most useful web-friendly feature to date, but it is limited in the way it creates transparent GIFs.
• The Image Mode Indexed Color method is very flexible--you can do things such as applying selective dithering and tweaking the color palette through selections--however, it lacks the full interactive capabilities of the Save for Web plug-in.
• The GIF89a Export module, when used with the Image Mode Indexed Color method, is great for creating transparent areas, but its RGB-to-Indexed Color capabilities are rudimentary, especially when compared with the other methods.

Let's start by indexing an image with the Save to Web plug-in, then move on to using the Image Mode Indexed Color method. I'll describe in detail the GIF89a Export module in Chapter 5.

Using Save for Web

When you choose Save for Web, Photoshop 5.5 displays your image in a new window (see Figure C-26). Once you are in this window, you won't have access to any of Photoshop's editing or processing tools. You can, however, resize your image in the Save for Web box. Click on the Image Size tab in the lower-right corner to bring up the Image Size palette shown in Figure 3-1. Regardless of the original image's resolution, the optimized image will always be saved at 72 dpi.

Figure 3-1.

As soon as your image appears in the Save for Web box, Photoshop automatically begins optimizing the image for the web. Photoshop uses your most recently selected optimization settings; if you've never run the plug-in before, the default settings will be used. You don't have to wait for the optimization process to complete in order to customize the settings. After the image loads, press Command-Period (Mac) or Escape (Windows) to stop the optimization process. Make sure you wait for the image to load in, though, as indicated in the progress bar at the bottom of the window; if you abort while the image is still loading, Save for Web will abort, and you'll have to start all over again

Next, click on the Original tab in the upper left of the interface, shown in Figure 3-2. This lets you change the optimized settings without waiting for Photoshop to apply each change. (If you select the adjacent 2-Up or 4-Up tab, you'll get a view of your original graphic displayed side by side with one or three optimized versions of the graphic. You can assign different optimizing settings to each version and compare the effect.)

Figure 3-2.

In order to illustrate what comes next, I'll show two ways to optimize the same image. Both ways will create a good-looking GIF that can be read by all browsers, but that's where the similarity ends. Only the second method will create a graphic that is as small as possible and contains key areas of browser-safe colors.

For my example, I've chosen a graphic created by Valerie Robbins for a nationalgeographic.com page. It contains type and a background with solid colors, and will not suffer from being reduced to 256 or less colors. In other words, it is a perfect candidate for GIF.

The easy way

The first way is the easiest: I simply apply Save for Web's default GIF settings. These settings give visually pleasing results for almost every graphic that meets the GIF criteria.

Here are the basic steps:

1. Run the Save for Web plug-in.
2. Wait for the optimizing process to stop, then select the Original tab.
3. If they aren't chosen already, choose the following settings from the drop-down menus in the upper-right corner, as shown in Figure 3-3.

Figure 3-3.

Format: GIF

Palette: Selective

Dither: Diffusion

Lossy: 0

Colors: 256

Dither: 100%

Web Snap: 0%

Interlaced box: unchecked

Figure 3-4.

1. Select Optimize from the menu tab.
2. Once the optimizing process is complete, toggle back and forth between the original and the optimized version using the Original and Optimized tabs. Zoom in for a closer look by selecting the zoom tool and clicking on the image. You can also zoom in by selecting the drop-down preview menu found by holding down Control/Shift while clicking anywhere in the Save for Web window.
3. If the optimized graphic looks acceptable, and it should, click OK and save the file. Photoshop automatically adds the .gif extension.

Following these steps, I successfully optimized the web graphic shown in Figure C-26, weighing in at 14.31K. The fact is, I can do better. (By the way, the file size circled in red in the lower-left side of the window is accurate, unlike file sizes found in Photoshop's main window, which are approximations.)

Batch optimization To apply custom settings to similar graphics, choose Save Settings from the drop-down menu. See Figure 3-4. To embed your settings into the original Photoshop file, hold down the Option/Alt key. The OK button turns into a Remember button. If you select Remember, the next time you open the Photoshop file with the Save for Web plug-in, it will apply the same settings that were applied at the time you choose Remember. (If you don’t do this, the next time you open your Photoshop file, it will apply the most current optimized settings.)

The better way

Now, I'll try again, keeping the GIF file format but tweaking the other settings. I've set my window to display 4-Up and zoomed in 300% percent so you can clearly see the effects of the different settings.

In Figure C-27, I've applied three different palettes, Perceptual, Adaptive, and Web, keeping my other settings the same as in the first example.

As you can see, the Perceptual palette created a slightly larger file size (14.38K) than the default Selective palette (14.31K). Otherwise, the result is very similar, which isn't surprising because both palettes create a custom color table by prioritizing colors for which the human eye has greater sensitivity. Selective is just slightly better than Perceptual at maintaining broad areas of color and preserving browser-safe colors.

The Adaptive palette (formerly the "best" option in Photoshop 4 and 5), which samples colors from the spectrum appearing most commonly in the image, doesn't do as good a job, at least not in this graphic. Notice the chunky look of the gold around the word "light." The Adaptive palette also produced a slightly bigger graphic (14.59K). Even though the Web palette resulted in a file size of only 11.86K, the graphic looks awful. That's because the Web palette only applies the 216 colors shared by both the Mac and PC platforms.

Based on what I see here, I will stay with the Selective palette. (In general, I find the Selective palette does the best job; however, I use the Adaptive palette when I index a color photograph, and I use the Web palette when a graphic contains a limited number of flat colors.)

In Figure C-28, I've applied three different dither percentages, 0%, 50%, and 100%, leaving the dither type set to Diffusion. The Diffusion option always produces a better result than Pattern. If you are going to slice your image into smaller parts, you might want to try 5.5's new Noise dither pattern, which reduces the seam patterns along sliced edges.

As you can see, as I decreased the amount of dither I've also decreased the file size. However, the difference is so small, I will leave my settings at 100%, which produces a slightly better image.

Figure C-29 shows the effect of Photoshop's Lossy GIF setting. Adobe has come up with a clever technique that actually turns the normally lossless GIF compression process into a lossy one. I'll spare you the technical details of how they do it, but the result is that you can apply greater compression to the GIF file format, albeit with a trade-off in quality. When I set a value of 15, there is little noticeable difference in quality but a nice drop in file size from 14.31K to 12.18K. At a lossy value of 100, the file size is 7.49K, but the quality is unacceptable.

Keep in mind that you cannot use the Lossy option when you've selected the interlace option or when Noise or Pattern dither algorithms are selected. (Interlace, by the way, creates a GIF that loads on a browser window gradually, in successive passes. Interlacing adds file size, so it is best avoided.)

Figure C-30 shows the effect of reducing the number of colors in the graphic. Reducing palette size always yields a substantial reduction in file size. The quality difference between 256 colors and 128 colors is slight and yet there is a drop in file size from 12.18K to 10.84K. Dropping to 8 or 32 colors was unacceptable.

Putting this all together, I now have a graphic with a file size of only 10.84K.

One last thing. How will this graphic look on monitors that can only display 256 colors (8-bit monitors)? Those systems dither any colors not found in the 216-color browser-safe palette. I am not so concerned about the detailed areas of the graphic--they'll still look OK if they dither. It's the solid blocks of color that worry me. If they dither, they will detract from the overall quality of the graphic.

How do you know if a color is browser-safe? How do you change it if it is not? It's easy with the Save for Web plug-in:

1. In the Save for Web box, select the eyedropper tool.
2. Click on a color in your graphic.
3. Turn your attention to the Color Table to the right of your graphic. (See Figure C-31.) The color you selected is represented and highlighted in the Color Table with a white border around it. If the selected colors box contains a black diamond in the center, it's browser-safe. If it doesn't, it's not.
4. To change an unsafe color to a browser-safe color, simply click on the cube icon at the bottom of the Color Table. This will shift the color to the nearest browser-safe color.
5. To prevent the color from being dropped or changed if you alter your color settings, click on the padlock icon at the bottom of the Color Table. A white square with a red center appears in the lower-right corner of each locked color.

In Val's graphic, the dominant red in the background is already browser-safe. But the yellows that make up the gold box are not, as shown in Figure C-31. Using the method outlined above, I'll shift several of the yellows to browser-safe colors to prevent them from dithering. By holding down the Shift key while I use the eyedropper tool, I can make multiple selections and use the cube to shift them all at once, as shown in Figure C-32. I could have also used Save for Web's Web Snap feature. By entering a higher numerical value, it automatically shifts more colors to browser-safe. I prefer, however, to shift colors individually.

Here are some other important things you should know about the Color Table:

• You can change the way the colors are sorted in the Color Table panel pop-up menu. See Figure 3-5.
• You can add colors from the Color Table by clicking on the color sample box. Double-clicking brings up the Color Picker. Choose a new color; when you close the Color Picker, the new color will replace the old one in the sample box. Remember, 5.5's Color Picker now has an Only Web Colors option.
• You can delete a color by clicking on it in the sample box and then clicking on the trash icon at the bottom of the Color Table panel. You can delete a number of colors at the same time by holding down the Shift key while selecting and then clicking on the trash icon.

Figure 3-5.

Save for Web or ImageReady? Photoshop’s Save for Web has many of the same optimizing controls as ImageReady. So when should you use Save For Web and when should you use ImageReady? Although ImageReady 2.0 ships with Photoshop 5.5, it is still a standalone program. That means it must be launched separately and therefore takes up RAM and hard disk space. Switching back and forth between the two programs is relatively easy, especially between Photoshop 5.5 and ImageReady 2.0, but you still need to leave one work environment for the other, which is inconvenient at best and troublesome at worst. Some web producers have reported data corruption when they’ve tried to toggle between Photoshop and ImageReady with files containing several type and mask layers. I suggest you stick with Photoshop 5.5 for image optimization and use ImageReady only for such features as slicing, animation and rollovers.

Previewing compression options

In Chapter 1, Making Photoshop Web-Friendly, we discussed that differences in monitor gamma will make images that look good on a Mac look dark on a PC and images created on a PC look washed out on a Mac. The Save for Web plug-in includes a feature to preview how your image will look on different platforms. Click on the small arrow in the upper right of the Save for Web window and a drop-down menu appears, shown in Figure 3-6. Choose the platform in which you wish to preview your work. You can also choose Browser Dither, which shows how your graphic will look if it is forced to dither by a browser.

Figure 3-6.

To preview your graphic in an actual browser window, click on the browser icon on the bottom right of the Save for Web window. This brings up a pop-up menu where you can select the browser to use, as shown in Figure 3-7. Photoshop places aliases (or shortcuts, if your prefer) of all browsers found on your hard disk in a folder called Preview In, located in Photoshop's Helpers folder. One of these aliases is surrounded by square brackets. To change the default browser, remove the brackets from the existing browser and add them to the program you want to be your default.

Figure 3-7.

Undocumented feature In the Save for Web window, clicking Control-Shift (on the Mac) or Control-Shift then right-click (on Windows) brings up a menu combining the Magnify, Platform Preview, and Browser Dither menus.

Working backwards

In the previous example, I started with the assumption that quality was the first priority. With the Save for Web plug-in you can also work backwards and prioritize file size. This can be especially useful when you are creating an ad banner that has a specific file size requirement.

To do this, go to the arrow in the upper, far right corner. This Settings pop-up menu includes a command called Optimize to File Size, as shown in Figure 3-8. Selecting this command brings up the dialog box shown in Figure 3-9. Here you can set the desired file size you want to squeeze the graphic into. There are also two radio buttons. Current Settings will keep your file format, changing palette or compression options to fit to the file size. Auto Select GIF/JPEG not only cycles through various palette options until it arrives at the desired file size, but it will also automatically choose whether GIF or JPEG is the better file format.

Figure 3-8.

Figure 3-9. Auto Select GIF/JPEG not only optimizes to file size but also picks the best format.

Figure 3-10. The Action palette's Batch dialog box.

Automate/Batch You can create a folder containing a batch of similar images and use a combination of Photoshop 5’s Automate/Batch feature (File Automate Batch) and an action to automatically optimize all the images for you. See Figure 3-10. Start by opening an image from the folder and name and record an action that optimizes that image to your liking. You can use either 5.5’s Save for Web method or Image Mode Indexed Color method. When you are finished, choose File Automate, select the recorded action and the folder containing the images you wish to optimize, and Photoshop applies your action to the entire batch of images automatically. If you use Save for Web to optimize your representative image, a Photoshop action will record the various optimizing settings. Unfortunately, however, if you choose Optimize to File Size Auto Select GIF/JPEG, Photoshop will not automatically analyze each image in your folder but will only apply the optimized settings that were calculated when you optimized your first image and recorded the action.

The Indexed Color option

In most versions of Photoshop, choosing Image Mode Indexed Color is an effective way to index your image in preparation for saving as a GIF. Using this method you can even do things that can't be done with the Save for Web plug-in, such as tweaking the palette to emphasis certain areas of your image and applying selective dithering; in addition, the GIF89a Export module offers much more control over transparency than does Save for Web.

Photoshop 5.5 has the best Indexed Color capabilities to date. Not only can you preview the effects of your optimizing choices in real-time, but you can apply variable amounts of dither as well. With 5.5's Color Table (Image Mode Color Table), there is a certain degree of interactivity which makes selectively adding browser-safe colors easier. There are also more ways to create transparency in 5.5, something I will discuss in more detail in Chapter 5. In Photoshop 5.5, you can go directly from an RGB image to a GIF file via File Save a Copy; when you choose CompuServe GIF as the file format, the Indexed Color dialog box automatically appears.

To illustrate the Image Mode Indexed Color method, I'll index another of Valerie's nationalgeographic.com graphics. I'll also note where 5.5's features differ from earlier versions of Photoshop.

Again, I'll try two approaches. One way is easy but won't necessarily produce the optimal graphic. The other way takes a little more time, but the results are better.

Here are the steps to the first method:

1. Working with a RGB image, select Image Mode Indexed Color. This brings up the dialog box shown in Figure 3-11.
2. Apply the following settings:

3. Palette: Selective

   Colors: 256

   Forced: None

   Dither: Diffusion

   Amount: 100%

4. Save the image, and then Save As to save it as a CompuServe GIF file.

Figure 3-11. The Indexed Color dialog box.

In most cases, when a graphic contains more than 256 colors, these settings will produce an acceptable GIF, as illustrated by Val's graphic shown in Figure C-35.

I'll try again. I'll keep my palette set to Selective because I know from experience that it will do a good job on a graphic like this one. (If your graphic contains less than 256 colors, the Exact palette will automatically be selected, which is fine unless you want to use the Web palette. If you apply the Web palette, be sure to follow the instructions outlined in "Special Web palette considerations" later in this chapter.)

Browser dither One of the web browser's many jobs is to manage color. This is an issue because web pages typically have numerous images on a single page, so it would be impossible for an 8-bit system to display each image's palette. That's why browsers have their own palette, generally known as the browser-safe palette, shown in Figure C-33. This is a 216-color palette, the colors of which are common to both Mac and Windows platforms, shown in Figure C-34. Technically, it's called a 6 × 6 × 6 color cube because the 216 colors are generated by combining just six colors. The use of browser-safe colors is an important concept to understand if you want your images and graphics to look their best on the greatest number of display systems. First of all, if everyone surfing the Web used a display system capable of displaying millions or even thousands of colors, we wouldn't need a discussion about browser-safe colors. There would be plenty of colors to go around. But the fact is the majority of Web surfers use 8-bit display systems. In general, 8-bit Macs use the 256-color system palette, which contains the 216 browser-safe colors plus 40 more, and Windows computers always use the browser-safe palette. There do seem to be times, however, when Macs use the smaller palette. As long as your image contains only the 216 colors in the browser-safe palette, there's no problem. What happens when your image contains non-safe colors? The browser either uses dithering to simulate the missing color, or it entirely changes the color to one of the colors in its palette. Now imagine an image on a blue background. If you pick whatever blue you want and index it, do you get a nice flat color? Not necessarily. If it's a non-browser-safe blue you get dithering, because the browser will try to approximate the color you asked for from the colors in the browser palette. No good. The solution, of course, is to pick a browser-safe blue for that field. Although you don't have control over what kind of display system your audience is using, nor do you have control over the way in which a browser dithers or changes colors in your image or graphic, you do have control over which colors you choose to use. When you work with the 216 colors that are common to both the Mac and Windows machines, you can be assured that they will not dither or be replaced by a different color. Of course, these colors may not always look the way that you expect because of individual monitor calibration (or lack thereof ) and the gamma characteristics of various computer platforms--but the differences are relatively predictable. The best way to use browser-safe colors is to apply them to areas of large expanses of flat colors, while using dithering on areas of continuous tone, subtle gradation, and anti-aliasing.

I'll try reducing the number of colors and see what that does. At 64 colors the graphic still looks fine, but at 32 colors (see Figure C-36), it doesn't, so I'll stick with 64 colors. (Under the word Preview in the Indexed Color box, a short dash pulses until the optimizing is complete.) Zooming in and out (Control/Command zooms in and Alt/Option zooms out), I can carefully examine the effects of my changes. With Photoshop 5.0 and 5.02, which also have preview capabilities, you can't zoom in and out while your Indexed Color box is open. You must magnify your image before choosing Image Mode Indexed Color. With other versions of Photoshop, preview is not an option.

With 5.5, you can fine-tune the amount of dither. After some trial and error, I notice that my graphic still looks good at 80% dither. The less dither, the smaller the file size, so this reduction in dither is good. With earlier versions of Photoshop, you can only turn dither on or off, and in nearly all cases when you have a complex graphic or a photograph, you'll want to leave it on. Turn dither off for graphics with less than 256 colors.

I'm happy with what I see and now the file size is only 19.8K.

Replacing non-browser-safe colors

Let's turn now to the browser-safe color issue. As mentioned earlier, it is not visually pleasing when solid, large expanses of color (such as those found in a background) dither. You could apply the Web palette to the entire graphic, but with a complex graphic, the results generally are not good. Instead, it's better to selectively replace a background or solid color with a browser-safe color and not worry about the other areas.

With 5.5's Save for Web plug-in, selective color replacement is easy. It's a bit more work if you are using the Image Mode Indexed Color method, but it can still be done. Here are two methods: the first method requires that you work in RGB mode, replace background colors with browser-safe colors from the swatch or color picker, and then index your image; the second method occurs while in Indexed Color mode and uses the Color Lookup Table.

The RGB method:

1. Fill the foreground color box with a browser-safe swatch. (You can select browser-safe colors from your swatch palette or from your color picker.)
2. Use either Photoshop's Magic Wand, magnetic lasso tool, or manual selection tools to select the area of the image that you want to change. You could also use the Color Range tool. (If you use the Magic Wand tool, be sure to experiment with the Grow and Similar commands found under the Select menu. These options are especially useful to isolate large expanses of background or areas of similar color.)
3. Fill the selected area with the color that you chose from a browser-safe palette.
4. To ensure that your browser-safe colors don't shift when you apply the Indexed Color command, check the Preserve Exact Colors checkbox in the Indexed Color dialog box. (This is only an option in Photoshop Versions 5.0, 5.02, and 5.5. With earlier versions of Photoshop, you will need to manually check your colors after you've indexed your graphic to make sure the colors haven't shifted. Sometimes they shift and sometimes they don't. It depends on the image and the palette you apply.)

The Indexed Mode method:

1. Choose Image Mode Color Table (see Figure 3-12).
2. Select the eyedropper tool.
3. Click on the area in your image that you wish to alter. The color box in the Color Table will be highlighted and the color you selected will be deleted from the box and from the image.
4. Double-click on the highlighted color box in the Color Table to bring up the Color Picker. Select the browser-safe color of your choice and click OK. That color will now replace your old, non-browser-safe color.
5. Repeat this process on other flat colors that you don't want to browser-dither.

Figure 3-12. The Color Table dialog box.

In pre-5.5 Indexed Color Mode, you can use the Color Lookup Table to replace a non-browser-safe color in earlier Photoshop versions. However, this method is a bit awkward because the earlier Color Lookup Tables are not interactive. You can choose a color in the table to edit the image, but you can't click on a color in the image to bring up that color in the table and change it. This makes finding the color you want a hit-and-miss proposition.

To change a color using this method, follow these steps:

1. Open your indexed image.
2. Choose Image Mode Color Table.
3. Find the background or dominant color in the Color Table that you want to change to a browser-safe color. (This process is hit-and-miss and requires some guesswork.) Click on the color and the Color Picker appears. Either type in the RGB values that equate to a browser-safe color or simply use the eyedropper tool to click on a browser-safe color in the Swatches palette.

Special Web palette considerations

If you apply the Web palette, you'll end up with an indexed image that contains 216 browser-safe colors. But what if you don't need 216 colors? What if your image contains only 64 colors, or, for that matter, 16? By saving your file with 216 colors you have created an unnecessarily large file. What to do now? You can get rid of the unused colors by following these steps:

1. Switch to RGB mode.
2. Without doing anything else, switch back to Indexed Color mode. If your image has less than 216 colors, the Exact palette should be selected, and the number of colors in the image will be displayed.
3. Click OK, and save the indexed image as a GIF.

The new image will look exactly the same as the original, while the file size will shrink.

Customizing the Adaptive, Selective, and Perceptual palettes

When Photoshop converts an image from the RGB mode to the Indexed Color mode, it treats all parts of the image equally. It doesn't recognize, for example, that you might be more concerned about the foreground of the image than the background. But you're not stuck with this situation--you can create a palette that best represents the important parts of your image.

There are two ways to do this:

• "Tweak" (or influence) the Adaptive, Selective, or Perceptual palettes.
• Create a custom palette.

The first way is easier. To tweak one of the three above mentioned palettes, simply select the area that you want to emphasize with a selection tool. Now when you convert from RGB to Indexed Color mode, Photoshop will automatically weigh the conversion in favor of the selected area.

In Figure C-37, for example, Rebecca's face is the most important element in the image. However, if the Adaptive palette is applied normally to this photograph, too much emphasis will be placed on the colorful background and not enough of the colors that make up the skin tone will be represented. As Figure C-38 shows, the results are not flattering.

But we can tweak the palette by having Photoshop emphasize the colors in the face and de-emphasize the colors in the background. To do this, simply select the face before indexing, as shown in Figure C-39. The new palette, shown in Figure C-40, contains many more of the subtle tonal variations that make the skin tone more realistic.

In the previous example, we got good results by influencing the Adaptive palette. But we could have gotten even better results if we had created a CLUT (Color Look-Up Table) that put total rather than partial emphasis on the selected area. To do this, you need to create a custom palette. Once you've created this custom palette, you can apply it to your original image or to one comparable in color.

To create a custom palette, follow these steps:

1. Open an RGB image.
2. Make a copy of that image (Image Duplicate), merging layers if necessary. You'll work on this copy to create the custom palette, then apply the palette to your original.
3. Crop the duplicate image to the most color-critical area. This part of the image will control the color palette.
4. Index this cropped image with the adaptive palette.
5. Save this palette by selecting Image Mode Color Table and clicking Save. Give the palette a name and click OK.

Now that we've created a custom palette, we can apply it to the original image. Just index the original and choose Custom palette. This brings up the Color Table dialog. Click on the Load button and select the custom palette you just created. Photoshop will apply the custom palette to your image.

As you can see in Figure C-41, Rebecca's face is nearly color-perfect. However, since our custom palette doesn't include any colors from the background, the background looks terrible. A solution to this problem would have been to include a few background colors in our custom palette, which could have been done by cropping our image looser.

Selective dithering

When you command Photoshop to dither an image, it applies the dither pattern to the entire image, even to areas that you might not want to dither, such as areas containing flat colors. Wouldn't it be great if you could "tell" Photoshop to selectively dither a small part of an image and yet keep the other parts intact?

c|net's Casey Caston has found a way to do just that. To use Caston's method of selective dithering, follow these steps:

1. In RGB mode, copy the part of the image to dither.
2. Index the image.
3. Paste the copied portion back from the Clipboard to the indexed but undithered image. Photoshop automatically dithers the pasted RGB selection, leaving the rest of the image untouched.

Caston regularly uses this technique to give him very specific control over the way his c|net graphics look.

The next three color figures show the results of this approach to indexing a GIF. Figure C-42 shows the graphic indexed to the Web palette. Figure C-43 shows the image with the adaptive palette. And Figure C-44 shows the results of the combination approach: some of the image is dithered, some isn't.

How big is your image file anyway? As a creator of web content, you need to pay attention to the file size of your image or graphic. Many web designers have decided that the total size for a web page shouldn't be more than 30K, so every kilobyte counts. How can you determine the actual file size of an image you are currently working on? Photoshop 5.5's Save for Web plug-in displays an accurate file size in the lower-left corner of its window. However, the size that is displayed on the bottom left of Photoshop's main image window has very little to do with actual number of kilobytes that make up the image. If you are working with a JPEG image, it has nothing to do with the actual compressed file size. (Display the size by positioning the pointer over the triangle in the bottom border, holding down the mouse button, and choosing Document Sizes.) These numbers are useful when you want to know the approximate difference in size between a layered and a flattened image. The first value shows the file size of the final file as it would be if its layers were flattened. The second value shows a file size that includes all layers and channels. When you choose Image Image Size, the file size number displayed is only a rough approximation of the actual number of bytes of your image. In versions other than 5.5, you'll need to leave Photoshop and click on your desktop to find the actual file size. In Windows, the file size you see in the file list is accurate. On the Mac, however, this number is usually way off. The Macintosh Finder displays not the size of the file but the amount of hard drive space consumed. To find the actual size of a file, use Command/Control-I (or File Get Info). The first number shown next to Size is the amount of hard drive space the file occupies. The number next to it in parentheses is the more accurate number. Ultimately, what really matters is the final size of the image file once it is on a web server. This final file size is often much smaller than you think, because unwanted and unneeded data is stripped in the process of putting an image on a server. This is especially true for Macintosh files because the Mac adds a "resource fork" that is always stripped away by a web server.

Getting better tiled backgrounds

When an image or graphic is used as the background for a web page, you have to be especially careful to use browser-safe colors. This is because browsers handle background images differently than other images. When it comes to backgrounds, the browser will shift non-browser-safe colors instead of dithering them.

This became quite apparent to designer Gregg Hartling when he tried to use a GIF background tile that he had created using the Adaptive palette. Gregg knew that by using the Adaptive palette he ran the risk of introducing colors that weren't browser-safe. He thought the image might dither when displayed on an 8-bit system, but he didn't see that as a problem because the dither would add a nice effect to the image.

But the background GIF didn't dither. Instead, as you can see in Figure C-45, the browser substituted colors from the Web palette and that's all it did. The result was a clumpy, banding-like effect. Gregg quickly went back to his original image and used the browser-safe palette with diffusion dither selected and got the results he wanted, as shown in Figure C-46.

Saving time with Actions Earlier versions of Photoshop don't have a Indexed Color Preview option, and it is time-consuming to find the happy medium between file size and quality. You have to convert and save many different versions of your image until you find the perfect balance. If you are using Photoshop 4, you can automate the process of applying different color depths and palettes to a single image with Actions. Take this tip from Sean Parker, the technical wizard at Parker Grove. Sean created an Action that applies the different color depths to the Adaptive palette with diffusion dither, and then applies the Web palette with dither. He has also created an action that applies the different color depths to the adaptive palette with no dither, and then applies the Web palette without dither.

A little more work

As you've seen in this chapter, using Photoshop to index a graphic in preparation for the GIF file format takes a bit of work, especially if you are trying to get it completely right. Remember, what may seem daunting at first becomes easier and easier as you become familiar with the various Photoshop settings and how they affect different types of images and graphics. In the next chapter, we'll show you ways to maintain even more control over the color in your graphics by using browser-safe colors from the start.

Back to: Photoshop for the Web, 2nd Edition