Applying optimization settings

You use the Optimize panel in the Save for Web dialog box (Photoshop) and the Optimize palette (ImageReady) to set optimization options. If you’re working in 2-Up or 4-Up mode, you can repopulate the views to automatically generate lower-quality versions of the image based on the selected settings.

To apply optimization settings:

1Select a view to which you want to apply optimization settings.

2If your artwork contains multiple slices, select one or more slices to which you want to apply the optimization settings. (See “Working with slices in the Save for Web dialog box (Photoshop)” on page 417 and “Selecting slices” on page 373.)

3Do one of the following:

•Choose a named optimization setting from the Settings menu. For information on creating custom named settings, see “Saving and resetting optimization settings” on page 425.

•Choose a file format from the File Format menu.

4 Set additional optimization options. The file format you chose in Step 3 determines which options are available to you.

For more information on specific optimization options, see “Optimization options for GIF and PNG-8 formats” on page 420, “Optimization options for JPEG format” on page 423, “Optimization options for PNG-24 format” on page 424, and “Optimization options for WBMP format” on page 424.

To apply optimization settings based on file size:

1Choose Optimize to File Size from the Optimize pop-up menu (Photoshop) or the Optimize palette menu (ImageReady).

2Choose a Start With option:

•Current Settings to use current optimization settings.

•Auto Select GIF/JPEG to automatically generate a GIF or JPEG file. (Photoshop or ImageReady selects GIF or JPEG format, depending on its analysis of colors in the image.)

3 Enter a value for file size, and click OK.

To repopulate optimization settings:

1Apply optimization settings to a view in 2-Up or 4-Up mode.

2Choose Repopulate Views from the Optimize pop-up menu (Photoshop) or the Optimize palette menu (ImageReady).

The the optimization settings for the selected view and the original view are not altered during repopulation.

To restore an optimized version of an image to the original version:

1Select an optimized version of the image in 2-Up or 4-Up mode.

2In the Optimize panel/palette, choose Original from the Settings pop-up menu.

Optimization options for GIF and PNG-8 formats

GIF is the standard format for compressing images with flat color and crisp detail, such as line art, logos, or illustrations with type. You can lower the size of GIF images by reducing the number of colors in the file. Like the GIF format, the PNG-8 format efficiently compresses solid areas of color while preserving sharp detail; however, not all Web browsers can display PNG-8 files. PNG-8 settings are very similar to the GIF settings.

(See “About file formats” on page 453.)

E

A

B

C

D

Optimization panel for GIF format:

A. File format menu B. Color Reduction Algorithm menu C. Dither Algorithm menu D. Transparency dithering menu E. Optimize menu

Note: In ImageReady, you can control which options show in the Optimize palette by clicking the Show Options control on the Optimize palette tab. To show all options, choose Show Options from the Optimize palette menu.

Lossy (GIF only) Specify a Lossy value to allow for lossy compression. Lossy compression reduces file size by selectively discarding data—a higher Lossy setting results in more data being discarded. You can often apply a Lossy value of 5–10, and sometimes up to 50, without degrading the image. File size can often be reduced 5%–40% using the Lossy option.

You can use masks from type layers, shape layers, and alpha channels to vary lossy compression across an image. This technique produces higher-quality results in critical image areas without sacrificing file size. (See “Using weighted optimization” on page 428.)

Note: You cannot use the Lossy option with the Interlaced option or with Noise or Pattern Dither algorithms.

Color Reduction Algorithm and Colors Choose a algorithm for generating a color table from the Color Reduction Algorithm menu. (See “Generating a color table” on page 431.) Then specify the maximum number of colors in the Colors text box. If you choose Web for the color reduction algorithm, the Auto option becomes active in the Colors pop-up menu. Use the Auto option if you want Photoshop or ImageReady to determine the number of colors in the color table based on the frequency of colors in the image.

You can use masks from type layers, shape layers, and alpha channels to vary color reduction across an image.This technique produces higher-quality results in critical image areas without sacrificing file size. (See “Using weighted optimization” on page 428.)

Dithering Dithering refers to the method of simulating colors not available in the color display system of your computer. Images with primarily solid colors may work well with no dither. Images with continuous-tone color (especially color gradients) may require dithering to prevent color banding.

GIF image with 0% dither, and with 100% dither

Choose a option from the Dither Algorithm menu:

•No Dither applies no dither to the image.

•Diffusion applies a random pattern that is usually less noticeable than Pattern dither. The dither effects are extended across adjacent pixels. If you select this algorithm, specify a Dither percentage to control the amount of dithering that is applied to the image. A higher dithering percentage creates the appearance of more colors and more detail in an image, but can also increase the file size. You can use masks from type layers, shape layers, and alpha channels to vary the Dither percentage across an image. This technique produces higher-quality results in critical image areas without sacrificing file size. (See “Using weighted optimization” on page 428.)

Note: Diffusion dither may cause detectable seams to appear across slice boundaries. Linking slices diffuses the dither pattern across all linked slices, and eliminates the seams.

•Pattern applies a halftone-like square pattern to simulate any colors not in the color table.

•Noise applies a random pattern similar to the Diffusion dither algorithm, but without diffusing the pattern across adjacent pixels. No seams appear with the Noise algorithm.

Transparency and Matte Select a combination of Transparency and Matte options to specify how transparent pixels in the image are optimized:

•To make fully transparent pixels transparent and blend partially transparent pixels with a color, select Transparency and select a matte color.

•To make all pixels with greater than 50% transparency fully transparent and all pixels with 50% or less transparency fully opaque, select Transparency and choose None from the Matte menu.

•To fill fully transparent pixels with the selected color and blend partially transparent pixels with the same color, select a matte color and deselect Transparency.

A B

C D

Examples of transparency and matting:

A. Original image B. Transparency selected with a matte color C. Transparency selected with no matting D. Transparency deselected with a matte color

To select a matte color, click the Matte color swatch and select a color in the color picker. Alternatively, choose an option from the Matte menu. The matte color should match the background color of the Web page.

Transparency Dithering When the Transparency option is selected, you can choose a method for dithering partially transparent pixels:

•No Transparency Dither applies no dither to partially transparent pixels in the image.

•Diffusion Transparency Dither applies a random pattern that is usually less noticeable than Pattern dither. The dither effects are diffused across adjacent pixels. If you select this algorithm, specify a Dither percentage to control the amount of dithering that is applied to the image.

•Pattern Transparency Dither applies a halftone-like square pattern to partially transparent pixels.