Optimizing Your Image in Photoshop

Before getting into the nitty gritty of working with the tools and options described in the preceding sections, I’m going to give you a quick overview of the procedures for using the Save for Web dialog box. To optimize an image, you follow these steps:
1. Open the image in Photoshop.
2. Choose File-->Save for Web.
3. Select the kind of preview you want to use by clicking one of these four tabs:
- Original
- Optimized
- 2-Up
- 4-Up
Although the upper-left pane displays the original image by default, you can select this pane and change into a fourth optimized preview.
4. Click in any of the four panes and, in the Settings area of the dialog box, choose the kind of optimization you’d like to apply to that version.
5. After you have fine-tuned the optimization settings and are satisfied with the results, select one of the previews and click Save.
Your image is stored on your hard drive with those optimization settings.
6. Repeat Step 5 to create as many different versions as you like, using a different optimization method for each.

JPEG Options
To optimize an image as a JPEG, choose the file format by doing one of the following:
- Choose one of the preset JPEG optimization settings from the Preset pop-up menu:
- JPEG High: High quality (low compression)
- JPEG Medium: Medium quality (medium compression)
- JPEG Low: Low quality (high compression)
If you save your own presets for optimization settings, they’ll appear in the same list.
- Choose the JPEG file format and Maximum, Very High, High, Medium, or Low directly from the Optimized file format and Compression quality pop-up menus.

Then select any or all of these options:
- Progressive: This option creates a low-resolution version of the image that downloads quickly (much like an interlaced GIF) and that is followed by progressively detailed overlays until the full image is seen. Again, not all browsers can benefit from this setting.
- ICC Profile: Choose this option to embed the ICC color profile of the image in the JPEG file. Very few browsers can correct the colors they display based on this information, and because it adds about 3K to your file size, you’re better off leaving it deselected for now.
- Optimized: This option creates a JPEG file that is occasionally a little smaller at any quality setting (and often doesn’t change the size at all), but not all browsers can display images with this type of optimization. If you feel your page will be viewed by many users with older browsers, you might want to forego the small additional size reduction.
- Quality: You can specify an exact quality/compression level by using a slider or by typing a value into the text box.
- Blur: Images that are slightly blurred can be squeezed more thoroughly by using the JPEG compression scheme. If your image still looks good with a tiny bit of blur applied, you can use a setting of 0.1 to 0.5 to gain a smaller file size. However, most likely you won’t want to sacrifice image detail, in which case it is better to go with a higher rate of compression and leave the blur setting at 0.
- Matte: This setting lets you specify a color to use to fill in pixels that were completely or partially transparent in the original. Partially transparent pixels are blended with the color you choose. Select a color from the pop-up menu, or click in the color swatch to select a color from the Color Picker.

You can save any customized JPEG settings you make by choosing Save Settings from the dialog box’s palette menu. Your stored settings then appear in the Settings menu for reuse.

Selectively changing quality levels in an image
You can use the Mask button next to the Quality box to selectively apply different quality levels to different areas of your image. This is called Weighted Optimization. To use this option, follow these steps:
1. Click the Mask button.
2. Select whether you want to use all text layers, all vector shape layers, or both. You can also select one of the alpha channels.
3. Adjust the minimum and maximum quality sliders in the Quality bar to the levels you want.
For example, you can specify a minimum quality level of 19 percent and a maximum quality level of 62 percent. Photoshop will use the grayscale values found in the masks and/or alpha channels you’ve selected to apply those quality levels. Photoshop optimizes the lightest areas of the mask at the highest quality level you’ve specified and the darkest areas of the mask at the lowest quality level you’ve specified.
4. Click OK to apply the weighted optimization.

You have some additional options in the Preview Menu pop-up menu including a choice of browser dither schemes, whether you want to hide slices created automatically whether to include the color compensation option, and the display of the estimated time for downloading.

GIF Options
The GIF options are generally different from those available for JPEG, as befits the very different nature of the GIF image.

File Format
To optimize an image as a GIF, choose the file format by doing one of the following:
- Choose one of the preset optimization settings from the Settings pop-up menu. You’ll find presets for GIF 128, GIF 64, and GIF 32 (both dithered and undithered), plus GIF Restrictive.
- Choose the GIF file format directly from the File Format menu.

Color Reduction Algorithm
This menu includes three categories of options for creating a palette for the Color Table:
- Dynamic: The options in this category include:
- Perceptual: Favors colors the human eye is most sensitive to.
- Selective: Weights the colors toward those considered Web safe.
- Adaptive: Builds a Color Table emphasizing the portion of the spectrum containing the colors that are most commonly found in the image — for example, greens in scenic photos or flesh tones in portraits.
- Restrictive: Also called Web-safe. Uses a 216 Windows palette and a 256 Mac palette.
Ensures that the browser will not dither 8-bit color images. Be warned that it can create larger files. With the dynamic options, a new palette of colors is collected every time you change or optimize the image.
- Fixed: These options include Mac OS and Windows (the palettes used by the Mac and Windows operating systems, respectively), Grayscale, and Black and White. The colors available are fixed, but the actual colors used vary with the image they are applied to.
- Custom: This option uses a fixed color palette created by the user, but which is not updated automatically when the image is modified.
You can also apply weighted optimization to color reduction by clicking the Mask button next to the Color Reduction Algorithm box, and selecting the mask as described in the sidebar,
“Selectively changing quality levels in an image.”

Dithering Algorithm
Choose the dithering scheme used to simulate colors that can’t be represented by the hues in the Color Table. Your choices are Diffusion (a random type of dithering), Pattern (a regular, halftone screenlike pattern), Noise (a random pattern that doesn’t spread across pixels), and No Dither. You can also choose the amount of dithering to allow in the Dither slider or text box. You can also apply weighted optimization to dithering by clicking the Mask button next to the Dither box, and then selecting the mask and amount of dithering as described in the sidebar, “Selectively changing quality levels in an image.”

Transparency and Matte
Choose Transparency and Matte options to control how transparent pixels are handled during optimization. Select a matte color from the menu, or click the matte color patch and choose a hue from the Color Picker. You’ll want the matte color to match the background color of the Web page as closely as possible.
- Select transparency and a matte color. This option keeps transparent pixels in the original image transparent and blends partially transparent pixels with a matte color you choose.
- Select transparency and no matte color. Choosing None from the Matte menu makes transparent pixels and those that are more than 50 percent transparent fully transparent, while rendering pixels that are 50 percent or less transparent as fully opaque.
- Select no transparency and a matte color. Deselecting transparency and choosing a matte color fills pixels that are completely transparent with the matte color you select and blends them. Consult an HTML manual to find out how to determine the hexadecimal values of the background colors of the page.

Transparency Dithering
Set the options for Transparency Dithering. This option determines how Photoshop will dither pixels that are partially transparent:
- No Transparency Dither: Leaves partially transparent pixels in the image alone.
- Diffusion Transparency Dither: Adds a random pattern to partially transparent pixels. Like diffusion dither, the pattern is spread across adjacent pixels. You can specify the degree of dithering with the Amount box/slider.
- Pattern Transparency Dither: Applies a halftone-like pattern to the pixels that are partially transparent.
- Noise Transparency Dither: Applies a random, nondiffused pattern to the semitransparent pixels.

Specify the amount of transparency dithering by moving the slider or entering a value.
Interlaced
Choose whether you want the image interlaced (to appear gradually in the browser when it downloads) or not interlaced.
Lossy
Select the amount of lossy file compression allowed in the Lossy slider or text box. You can use masks to add weight to lossy compression by clicking the Mask button and applying the mask settings.
Colors
Choose the number of colors in the image from the Colors list. Select a specific number of colors from 2 to 256, or choose Auto to let Photoshop choose the number of colors automatically based on the colors in the Color Table.
Web Snap
Use the Web Snap slider or text box to specify a tolerance level that will automatically change pixels that are within that tolerance level of a Web-safe color to that Web-safe hue. The higher the value, the more Web-safe colors the image has.
PNG Options
If you elect to create a PNG file, two sets of options are available for the two types of PNG files:
PNG-8 (256 colors) and PNG-24 (16.8 million colors).
The PNG-8 options, shown in Figure 2-5, are similar to the GIF options (described earlier in the chapter), with the following exceptions:
- Lossy compression is not available for PNG-8.
- Weighted optimization can be applied to the color reduction and dithering algorithms, which are otherwise similar to those used with GIF.
The PNG-24 options include only interlacing and the transparency/matte options described under GIF options.

Image Size
The Save for Web dialog box includes its own version of the Image Size dialog box, which resides on a separate tab, next to the Color Table tab, as shown in Figure 2-7. Although slightly different in appearance, it operates the same as the Image Size dialog box. You can specify a new width and height for the image or change the size by a percentage. You also can select the type of resampling performed when resizing the image, although you’ll almost always want to use the default Bicubic algorithm.

Optimizing Colors
You can manually shift one or more colors toward Web-safety. You can also change specific colors in an image that has already been converted to 256 colors to make them Web safe. Just follow these steps:

1. With the Color Table visible choose the colors you want to convert.
These are your options:
- Click an individual color in the Color Table to select only that color.
- Hold down the Ctrl key (or Ô key on the Mac) to add additional colors to your selection.
- Hold down the Shift key and click in an additional color to select all the colors between the last color selected and the additional color.
- To choose all colors in the Color Table that are already Web safe (or all those that are not Web safe), choose All Web Safe Colors or All Non-Web Safe Colors from the Color Table’s palette menu.
2. Choose Shift/Unshift Selected Colors to/from Web Palette from the Color Table palette pop-up menu.

You can also select colors in the Color Table and convert them to transparency by clicking the Transparency button in the Color Table, or lock them to keep them from being removed by clicking the Lock Color button. To remove colors from the Color Table, select the colors and click the trash can icon.