Task 7 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 into 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, choose File, Open. In the Open dialog box, select the file you want to compress with the JPEG format.


  2. Set JPEG Options

    Choose 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; 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 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, choose File, Open. From the Open dialog box, select the optimized file you just created. Check it against the original file to make sure that the detail is solid and that the color is good.


  6. Test Unsharp Mask Filter

    Because JPEG files tend to soften the original image, you may find that a slight Unsharp Mask filter helps bring back some detail (the filter also adds to the file size). Choose Filter, Sharpen, Unsharp Mask. Start by setting the Amount field to 50% or 100%; set the Radius field between .7 and 1.0. If you like the results, click OK to apply the mask; if not, click Cancel.


How-To Hints

Moving the Image Around

While working in the Save For Web dialog box, you can place the mouse cursor over the preview image; when the pointer changes to the hand icon, move the image around so that 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 keep the colors consistent as you compress the image.