► Note 126

See the Web Compression Settings section of the color insert for full-color samples of images with different optimization settings.

^Optimize JPEGs

The JPEG file format (pronounced "jay-peg") was created by the Joint Photographic Experts Group, seeking to create a format more suitable for compressing photographic imagery. Table 10-2 shows the characteristics of typical JPEGs.

One major difference between GIFs and JPEGs is that JPEGs don't contain an exact set of colors. When you save a photograph as a JPEG, you might consider all the colors in the file to be recommended only, because the lossy compression might require some colors to be altered. In addition, all web JPEG files must be set in the RGB color mode, as opposed to the print standard—CMYK.

When you save an image as a JPEG, you choose among several different quality levels. The highest-quality JPEG has the least amount of compression and, therefore, the least amount of data removed. The lowest-quality JPEG has the most amount of data removed and often looks a bit blotchy, blurry, and rough.

I usually save JPEG images with a medium to medium-low quality. The decision is made based on how low in quality you can go without compromising the integrity of the file: the lower the quality level, the lower the file size.

TRY IT To optimize an image as a JPEG in Photoshop, perform the following steps:

• In Photoshop choose File I Save For Web. In ImageReady choose Window I Optimize to display the Optimize palette.

• Click the 2-Up tab to display your original image on the left (or top) and the optimized file on the right (or bottom).

• If necessary, use the Slice Select tool to select the slice you want to optimize. Otherwise, if no slices exist, continue following these steps to optimize the entire image.

• From the Settings menu, select one of the default JPEG settings at the top. To start, I like to choose JPEG Low, because it's going to give the smallest file size, and I want to quickly see whether I can stand how the image looks at that low quality.

After making that selection, the appropriate settings are visible in the space below. For example, if you choose JPEG Low (as I did in the following illustration of the Optimize palette in ImageReady), the program selects JPEG from the File Type menu, Low from the Quality menu, and 10 (percent) from the Quality percentage slide. Edit additional settings as needed:

• Specify quality level (Low, Medium, High, or Maximum) and further refine it with the percentage slider to the right.



Color mode

Displayed in 24-bit RGB color, also called millions of colors; if the user's monitor isn't set to view 24-bit color, the file is displayed with as many colors as are available

Compression method



Not supported


Not supported


Supported (but called progressive JPEG)

File type


Table 10-2 JPEG File Format Characteristics

Table 10-2 JPEG File Format Characteristics

• When "Optimized" is selected, it creates a slightly smaller file size but causes the file to be unreadable in old browsers. (I recommend you leave it selected because this only affects very old browsers.)

• For Blur use higher numbers to blur hard edges in the image (just as the Gaussian Blur filter does) and achieve better file compression.

• If transparent areas exist, select a color from the Matte menu with which to fill them (because the JPEG format doesn't support transparency).

• Select "Progressive" to add interlacing.

• Select "ICC Profile" to save any ICC color profile attached to the image; available only when a profile is attached to the image. (I don't recommend this because most browsers don't currently support this feature, so it wastes file size.)

• Select "Preserve EXIF Metadata" to save any additional information with the file, such as creator; available for pictures downloaded from a digital camera only.

Optimize \ JJj

Settings: ( JPEG Low

(JPEG i ] 0 Optimized

[ Low i ] Quality:



1 1 Progressive Blur:



□ Preserve EXIF Metadata

When you're finished, in Photoshop click Save to save the slice or file using the selected optimization settings. (To save your settings without actually saving the slice or file, click Done to return to the main Photoshop window.) In ImageReady choose File I Save Optimized or Save Optimized As.

0 0

Post a comment