Solution: JPEG Optimization Settings

Optimizing reduces the size of an image so it will load faster in a Web browser. JPEG, is the best format for optimizing photographs. JPEG is also useful for optimizing Web graphics that contain graduated colors, like gradients, glows, or shadows. Optimize an image as a JPEG using the following settings in Photoshop's Save for Web window or ImageReady's Optimize palette.

File Format

In Photoshop, choose File>Save for Web to open the Save for Web window A. In ImageReady, choose Window>Optimize to open the Optimize palette B and expand the Optimize palette to see all its settings, as explained in the tip on the opposite page. Choose JPEG from the Format menu, or start with a pre-made collection of JPEG settings from the Preset menu.

Quality

Quality is the variable that has the most significant impact on the file size and appearance of a JPEG. The lower the quality setting, the more compression is applied. This reduces the file size, but can degrade the appearance of the image. Choose a preset from the Quality menu. Fine-tune that setting with the slider in Photoshop's Quality field or ImageReady's Amount field. The circle icon to the right of Photoshop's Quality field and ImageReady's Amount field opens a dialog box in which you can set different quality levels for text layers, vector layers, and individual channels in an image.

Blur

Blurring an image decreases its file size. Add blur by dragging the slider in the Blur field to the right. Don't overdo it or your image will look too soft.

Optimized

Leave this setting checked to lower file size slightly.

Progressive

This setting causes an image to appear progressively while it's downloading, so the viewer sees a low-resolution version before she sees the real thing. Leave this setting unchecked unless you like this effect.

ICC Profile

ICC Profiles contain color management information. We recommend that you do not include ICC Profiles with Web files because most Web browsers can't read them and they increase the size of a file. To do this, uncheck ICC Profile.

TIP

Expand ImageReady's Optimize palette. To see all the ImageReady optimization settings, click the double-pointed arrow on the Optimize palette tab

Matte

The Matte field is only relevant if there are transparent pixels in the source image. Because JPEG format does not allow transparency, any transparent pixels in the source image will be filled with the color in the Matte field when you optimize as JPEG. If you plan to use a solid color Web page background, set the JPEG's Matte field to the same color as the page background. This will cause the areas of the image that were transparent to blend in with the Web page background, creating the illusion of transparency.

Color Table

Ignore the Color Table in Photoshop's Save for Web window when you're optimizing a JPEG. We mention the Color Table here only to confirm that it should be blank when format is set to JPEG. That's because JPEGs, unlike GIFs, do not map the colors in the source file to a limited color palette.

Image Size

Reducing the dimensions of an image will always reduce the file size. In Photoshop, you can reduce the dimensions of the optimized image without affecting the source file. Click the Image Size tab in the Save for Web window A. Check Constrain Proportions to avoid distorting the image B. Reduce Width and Height to fixed numbers or by a Percent C. Changing image size—particularly sizing up-—can degrade image quality. To minimize the negative effect on image quality, set Quality to Bicubic Sharper when you're sizing down and to Bicubic Smoother when you're sizing up D. In ImageReady, resizing is done on the source file, using similar settings in the Image Size dialog box (Image>Image Size).

Metadata

Metadata is file information. You can choose to attach various kinds of metadata to a Web file from ImageReady's Optimize palette. Metadata adds to file size, so we usually uncheck Add Metadata A. If you leave Add Metadata checked, by default ImageReady adds any information that's in the Description B and Copyright Notice C fields of the File Info dialog box (File>File Info), increasing file size slightly. In rare cases, you may want to include EXIF data (information stored in a digital photograph, such as camera settings) or XMP data (keywords and other information about a file for use by other applications). To do that, click the Settings button in ImageReady's Optimize palette D to open the Output Settings dialog box and choose a metadata option there E.

In this tutorial:

Solution

Monday, August 2, 2010

JPEG Optimization Settings