Adjust JPEG web quality with the Modify Quality Setting command


Images are an integral part of just about every website today. Whether they're photos of friends and family on a personal site, food and flowers on a catalog site, or specimen samples on an institutional site, they provide information, entertainment, and variety. Images lighten a page and provide the same kind of visual relief as when used in print publications. Without them, a website would simply be page after page of text, which would turn away potential visitors since internet users typically don't like to spend a lot of time wading through text.

A major concern when working with images intended for the web is file size. The larger the file size is, the longer the download time. Reducing image file sizes is simple, but it always comes with a price: the lower the size, the lower the quality. You'd think by now there'd be a way to maintain quality and reduce file size. Well, there is. By using Photoshop's Modify Quality Setting command, you can maintain the quality in a masked subject area, and lower file size.

Working with the Modify Quality Setting command

Most images, especially photos, contain two distinct areas of visual focus: that of the subject and that of everything else. Since the subject area is the primary focus, its detail quality should be as high as possible. Because everything else (such as the background) is secondary, that detail quality needn't be as great. By first selecting the two areas through use of a mask, you can then use the Modify Quality Setting command to adjust the maximum and minimum quality level of each area, and in so doing, adjust the file size.

To begin, open the JPEG image you wish to work with in Photoshop.

In our example image, the lamp is the primary focus of the image, and the background and table it's sitting on are secondary, as shown in Figure A.


Figure A.


Select the subject area using a mask

1.

Choose the Magic Wand tool from the Toolbox.

2.

Enter a value in the Tolerance text box on the tool options bar. Because the background and table in our example aren't all that close in hue, we entered a moderate tolerance value of 20.

3.

Select the Anti-aliased and Contiguous check boxes.

4.

Position your mouse pointer in the background area of your image and click. As shown in Figure B1, a selection border now appears. To add to the selection, press and hold down [Shift] and then click in another background area, as shown in Figure B2. Continue to add to the selection until all the background areas are selected, as shown in Figure B3.


Figure B1.



Figure B2.



Figure B3.


5.

Choose Window Channels to open the Channels palette.

6.

Click on the Channels palette's pop-up menu, and select New Spot

Channel.

7.

Enter Background in the Name text box when the New Spot Channel dialog box opens.

8.

Enter 10 in the Solidity text box. This way you can see the mask as well as the image.

9.

Click OK. Photoshop creates a mask, indicated by a red overlay, as shown in Figure C.


Figure C.


Adjust image area quality levels

Now that we've added a mask to our image, we can use the Modify Quality Setting command.

1.

Choose File Save For Web, and the Save For Web dialog box opens.

2.

Click on the 2-Up tab, and two views of the image appear, as shown in Figure D.


Figure D.


3.

Click on the Optimized File Format dropdown list and select JPEG in the Preset section.

4.

Click the Use A Channel To Modify Quality Setting button found just to the right of the Quality dropdown list. The Modify Quality Setting dialog box now appears, as shown in Figure E1.


Figure E1.


5.

Make sure the Preview check box is selected.

6.

Click on the Channel dropdown list, and select Background. When you do, the Quality section becomes active, and a thumbnail of the mask appears in the thumbnail box in the lower-right corner of the dialog box, as shown in Figure E2.


Figure E2.


When saved, the image sections shown in white will contain the highest, or maximum, quality areas, and the black sections will contain the lowest, or minimum. You can adjust the level of quality of each with the two Quality sliders. The white slider on the right adjusts the Maximum quality level, which is shown in the thumbnail as the white subject area. The black slider on the left adjusts the Minimum quality level, which is shown as the black background area.

Compare quality level settings

1.

Select the white maximum slider and move it all the way to the left until the Maximum level reads 0%. Now both the subject and the background are at the same level of 0 percent. The left image in the dialog box is our original example and has a file size of 1.26 MB, as indicated by the title shown below the image. The right image is the preview Save For Web JPEG and has a much smaller file size of about 14.3 KB. Note the image quality of both the subject and the background.

2.

Reset the white slider to 100%, and then move the black minimum slider all the way to the right until the Minimum level reads 100%. Both the subject and the background are at the same level of 100%. The preview Save For Web JPEG has a file size of about 224.9 KB in our example. As before, note the image quality of both the subject and the background.

3.

Move the black slider back to 0%. The subject is at the maximum quality of 100%, and the background is at 0%. The preview Save For Web JPEG has a file size of about 186.2 KB in our example.

4.

Move the white slider slowly to the left again until you just begin to notice any appreciable difference in the quality of the background. This happens at about 55% in our example, and the file size is about 49.6 KB. At this setting, both the high quality in the subject area and the low file size are acceptable.

5.

Click OK once you're happy with your adjustments.

6.

Click Save. The Saved Optimized As dialog box opens.

7.

Navigate to the location where you want to save your file, enter a name in the File Name text box (Save As text box on the Mac), and click Save. Our results are shown in Figure F.


Figure F.


Two in one

The Modify Quality Setting command, through use of a mask, permits you to apply different image quality settings to different areas of a JPEG image intended for use on a website. In doing so, the subject area remains high, and you can set all else at as low a level as is desirable.



Get the Image You Want(c) Essential Photoshop Editing Techniques 2005
Get the Image You Want(c) Essential Photoshop Editing Techniques 2005
ISBN: N/A
EAN: N/A
Year: 2004
Pages: 105

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net