Saving and Optimizing Files for the Web (pp. 421-426)

File formats

GIF - limited to 256 colors, supports transparency, can reduce file size by reducing number of colors to 128, 64, 32, etc., compression is loss-less (but going from many colors to 256 isn't), compression works best for areas of constant color, uses indexed color scheme

JPG - 24 bit color (over 17 million colors), doesn't support transparency, can reduce file size by reducing quality (100 best, 0 lowest), compression is lossy, and there is a loss in information each time the compression is done. A quality figure of 80 is standard, increasing the quality from 80 to 100 often significantly increases the file size without much increase in perceptable quality.

Previewing Optimized Files

File>Save for Web and Devices. Click the 4-Up tab to see the original image and three previews simultaneously. Photoshop uses the current optimization settings for the preview to the right of the original. You can click on any of the previews and change the optimization settings for that. You can use the zoom tool and the hand tool to zoom in on particular areas of the preview whose quality you care about. There is a Preview button at the very bottom of the screen (may be off the screen in some screen resolutions) which opens your optimized image in a particular browser.

Matte

For GIFs, the Matte option controls how semitransparent pixels along the edge of an image blend with the background. Set the Matte color to the background color of the web page, if you know it. If it is unknown, set the Matte to None

For JPGs, the Matte color will be substituted for areas of transparency in the original image. If you choose none, transparent images will become white in the optimized image. Since JPGs don't support transparency, to simulate transparency, set the Matte color equal to the background color of the web page with the Color Picker.

Transparency

To designate a color as transparent, choose File>Save for Web and Devices, select the desired tab and the desired preview and from the drop-down list, choose GIF or PNG format. To the left of the preview pane, choose the Eyedropper tool. Click the required color in the selected image. At the bottom of the Color Table tab, click the Maps selected colors to transparent (first icon on left)

Source: Photoshop CS4 Visual Quickstart Guide, Elaine Weinmann and Peter Lourekas, pp. 421-426. Transparency settings information from Adobe Photoshop CS4 Web Production, Element K. Revised: July 6, 2010.