Learning Web Design Third Edition- P42 pot

Optimizing JPEGs Using weighted optimization Photoshop In Photoshop, once you’ve selected the higher-quality areas of the image, save the selection to a new channel Select ➝ Save Selecti

Trang 1

100% (38.8 KB)

Photoshop CS3

80% (20.7 KB)

60% (12.8 KB)

Fireworks 8

40% (8 KB)

1% (1.2 KB) 20% (1.8 KB)

100% (38.8 KB)

Photoshop CS3

80% (20.7 KB)

60% (12.8 KB)

Fireworks 8

40% (8 KB)

1% (1.2 KB) 20% (1.8 KB)

Figure 19-13. A comparison of various compression levels in Photoshop and Fireworks.

Weighted optimization (selective JPEGs)

Not all image areas are created equal You may wish to preserve detail in one area, such as a person’s face, but compress the heck out of the rest of the image To this end, Photoshop (versions 6 and higher) gives us Weighted Optimization In Fireworks, it’s called Selective Quality Both methods apply different amounts of JPEG compression within a single image—one setting for a selected area and another setting for the rest of the image

In both programs, the process starts by using a selection tool to select the area of the image you’d like to preserve From there, the programs work a

Trang 2

Optimizing JPEGs

Using weighted optimization (Photoshop)

In Photoshop, once you’ve selected the higher-quality areas of the image, save

the selection to a new channel (Select ➝ Save Selection) (Figure 19-14, A) and

give the channel a name B The white areas of the mask correspond to the

highest image quality, while dark areas describe the lowest (gray areas are on

a linear scale in between) C

In the JPEG options in the Save for Web & Devices dialog box, there is a

Mask button next to the Quality setting D Clicking the Mask button gives

you the Modify Quality Setting dialog box E where you can set the quality

levels for the black (low quality) areas and white (high quality) areas of the

masked image Selecting the Preview option allows you to see the results of

your settings When you are done, click OK, then Save

D

C

E

Adjust the settings for the white (high quality) and dark (low quality) areas of the masked image.

Select the image areas you want to preserve and

save the selection as a channel. Click the Mask button next to the JPEG Qualitysetting to access the Modify Quality Setting

dialog box.

Figure 19-14. Using Weighted Optimization in Photoshop CS3.

Using selective quality (Fireworks)

Fireworks has a set of options for creating what it calls “selective JPEGs”

(Figure 19-15) Select the areas of the image you want to preserve A, then

select Modify ➝ Selective JPEG ➝ Save Selection as JPEG Mask B In the

Optimize panel, you can set the Selective Quality for your selection or click

the adjacent icon C to access the Selective JPEG dialog box with a full set of

options, such as preserving type and button quality and selecting a color for

the masked area The regular Quality setting will be used for all other areas

of the image

Note

Photoshop offers weighted optimiza-tion GIFs as well (Fireworks does not) Look for the Mask button like the one pictured in Figure 19-14 D next to the Palette, Lossy, and Dither options to access the respective settings Refer to the Photoshop documentation for more detailed instructions.

Note

Photoshop offers weighted optimiza-tion GIFs as well (Fireworks does not) Look for the Mask button like the one pictured in Figure 19-14 D next to the Palette, Lossy, and Dither options to access the respective settings Refer to the Photoshop documentation for more detailed instructions.

Trang 3

In the Optimize panel, the button next to Selective Quality access the full set of quality options for the selection.

Select the area you want to preserve and save it as a Selective JPEG Mask.

C

D

Figure 19-15. Using Selective Quality in Fireworks 8

Choose optimized JPEGs

Optimized JPEGs have slightly smaller file sizes and better color fidelity (although I’ve never been able to see the difference) than standard JPEGs For this reason, you should select the Optimized option if your image software offers it (Figure 19-10, B) Look for the Optimized option in Photoshop and third-party JPEG compression utilities Fireworks does not offer the option

as of this writing

Blurring or smoothing the image

Because soft images compress smaller than sharp ones, Photoshop and Fireworks make it easy to blur the image slightly as part of the optimization process In Photoshop, the tool is called Blur (Figure 19-10, C); in Fireworks, it’s Smoothing (Figure 19-10, C) Blurring makes the JPEG compression work better, resulting in a smaller file (Figure 19-16) If you don’t have these tools, you can soften the whole image yourself by applying a slight blur to the image with the Gaussian Blur filter (or similar) manually prior to export The downside of Blur and Smoothing filters is that they are applied evenly to the entire image If you want to preserve detail in certain areas of the image, you can apply a blur filter just to the areas you don’t mind being blurry When you’re done, export the JPEG as usual The blurred areas will take full advantage of the JPEG compression, and your crisp areas will stay crisp Try combining this selective blurring technique with Weighted Optimization or Selective JPEGs for even more file savings

Quality: 20; Blur: 0 (9.3 KB)

Quality: 20; Blur: 5 (7.2 KB)

With a Blur setting of only 5, the

resulting file size is 22% smaller.

In Fireworks, use Smoothing for

Định dạng
Số trang	10
Dung lượng	460,81 KB