#30 Weighted Optimization for the Web
When optimizing images for the Web, you may think you can only control the compression setting of the entire image slice. But it's actually possible to have Photoshop and ImageReady apply less compression on elements within a slice that may be of importance to you, such as a company logo or type. This accommodating feature is called weighted optimization.
Weighted optimization allows you to use Text or Shape layers (see #24), or pixel-based alpha channels in your document to set a different quality range than that in the overall optimization settings. This makes it possible to apply an aggressive amount of compression on a background while maintaining readability of your crisp type overlay ( Figure 30a ).
Figure 30a Weighted optimization is helpful when you want to reduce the file size without losing image quality in critical areas such as type or a logo.
To take advantage of weighted optimization, do the following:
- Make sure you have a type layer, shape layer, or alpha channel in your document. Alpha channels are saved selections; just make a selection and choose Select > Save Selection in either Photoshop or ImageReady.
- In the Optimize panel in Photoshop or the Optimize palette in ImageReady, click the Mask button
next to the setting you'd like to weigh in on.
You'll see different options depending on the format of your image. JPEG format lets you modify the quality setting, whereas GIF format offers optimization mask settings for color reduction, dithering, and lossiness (
). PNG-8 format allows for color reduction and dithering settings.
Figure 30b These little mask icons are cues to which settings allow weighting. Really, how could you miss them?
- In the Modify Quality Setting dialog, choose which masks to modify the compression on: All Text Layers, All Vector Shape Layers, or an alpha channel (
Figure 30c The weighted optimization dialog allows you to give quality precedence to type and shape layers along with an alpha channel related to the overall compression setting.
- Keep the Preview option selected so you can see how your adjustments impact the quality of the resulting image.
- Select your quality or dithering range and click OK. The Color Reduction Options dialog for GIF format does not offer a range.