Task 5 How to Build JPEG Files for the Web

The JPEG format works well for continuous-tone images, such as photographs. Even though the compression format creates artifacts that pixelate the image, these snags are hardly visible in photographic-quality images (although they can degrade the quality of hard-edged graphics). Photoshop has a blur function built in to the JPEG dialog box that is helpful for many images. You can smooth over many of the artifacts that surface when the quality level gets too low.

1. Open File in Photoshop

In Photoshop, select File, Open. In the Open dialog box, select the file you want to compress with the JPEG format.

2. Set JPEG Options

Select File, Save for Web to open the Save for Web dialog box. From the Optimized File Format drop-down list, select JPEG. The main control in this section is the Quality slider. This setting determines the level of compression in the file, as well as the corresponding quality. Adjust the setting to high, medium, or low, remembering that the higher the quality, the bigger the file size and the lower the quality, the smaller the file size.

3. Select 4-Up to Compare Settings

Click the 4-Up tab to look at the original image and three variations. This comparison can help you select the setting that creates the highest-quality image combined with the lowest file size.

4. Tweak Blur Slider

Click the Optimized tab to return to that page, and then slightly raise the Blur slider to see whether this adjustment helps smooth the image. Click OK and rename the file to optimize it and save it as a separate file.

5. Reopen File

To check the quality of the image you just created, select File, Open. From the Open dialog box, select the optimized file you just created. Check it against the original file to ensure that the detail is solid and the color is good.

Original TIFF file

JPEG file

6. Test Unsharp Mask Filter

Because JPEG files tend to soften the original image, you might find that a slight Unsharp Mask filter helps bring back some detail (the filter also adds to the file size). Select Filter, Sharpen, Unsharp Mask. Start by setting the Amount field to 50% or 100%; set the Radius field to a value between .7 and 1.0. Gradually increase the settings until you like the results. Click OK to apply the sharpening or click Cancel.

How-To Hints

Moving the Image Around

While working in the Save for Web dialog box, you can place the mouse pointer over the preview image; when the pointer changes to the hand icon, move the image around so you can look at specific details in the image. You can also select the magnifying glass tool and zoom in and out of the image to check details.

Keeping Consistent Color

Enable the ICC Profile check box in the Save for Web dialog box to embed the profile in the compressed image. Only a few browsers support ICC profiles, but the feature can offer color consistency when you share your files with others.