Photoshop provides wonderfully copious options for saving Web graphics. If you’re not a seasoned Web author, however, the choices may be overwhelming.

Because digital photos can be very large files, it’s important to optimize, or compress, Web graphics so they download quickly in Web browsers. The idea behind optimization is to achieve small file size and still retain good image quality.

This month, we introduce the Save for Web command, which lets users save and optimize images into several formats. We’ll discuss the most popular format for digital photos and show you how to make good choices when saving your own Web files.

To follow along, you’ll need one digital photograph. Be sure to make a backup copy of your picture. Open it and select Image, Image Size. If the image is wider than 500 pixels, it is too large for a Web page. Type in a width of 300 pixels and click OK.

Photographic Images On The Web

Now it’s time to optimize, or shrink, the file size. The best file format for Web photos is JPEG. It’s pronounced “jay-peg” and stands for Joint Photographic Experts Group. This format was developed especially for compressing photographic-type images, those with subtle gradations of color. Because JPEG compression works by actually removing portions of the file, often barely detectible to the human eye, it’s called a “lossy” compression scheme. PC graphics saved in this format have the .JPG file extension.

With your photo open in Photoshop, select Save for Web from the File menu. The resulting window has four tabs just above the image preview. Click the 4-Up tab. Now, from the Settings drop-down menu on the right, select JPEG High.

Image Previews

The preview image in the upper left is your original. The one in the upper right has the highest image compression quality, followed by the one in the lower left and then lower right. Look just below each preview image. Notice that as quality settings descend, so do the file sizes. Photoshop usually expresses JPEG quality in increments of five and 10, with 100 being maximum and zero being lowest image quality. (Users can set quality to any number between zero and 100, however.)

As a rule of thumb, try to keep all Web images smaller than 12KB. Also, keep in mind that Web page graphics should take no longer than 8 seconds to load in a browser. If a page has two graphics, each should take 4 seconds.

Accounting for browsers. Also just below the thumbnail, Photoshop reports how long it will take a browser to download the image given a particular modem speed, say 28.8Kbps (kilobits per second) or 56.6Kbps. Most computers purchased in the last several years have 56.6Kbps-capable modems. To change the modem speed calculation, right-click anywhere on the thumbnail and select another speed.

Preview Settings

The Settings section lets users make changes to the previews. For example, select the image in the lower left. Click the Quality arrow on the right side of the screen and use the slider to increase or decrease image quality. Then compare this image (and its file size) against the other previews.

You can click the Progressive checkbox to make a progressive JPEG image, one that downloads top to bottom in sequential passes. Although progressive JPEGs are actually slightly larger than those that download all at once, they give the illusion of downloading more quickly.

Also, experiment with the Blur option, a tool useful for smoothing out a very low quality image and even reducing file size a bit more. Select the image you want to blur, then click the slider arrow.

Choose a file size. You can also tell Photoshop to optimize an image to the file size you want. Select a preview image, click the Optimize Menu button (the circular arrow button to the right of the Settings menu), and select Optimize to File Size. Type in the size you want and click OK.

Save Files

Once you’ve played around with the settings and compared previews, click the image you want to save. Then click the OK button at the top right of the Save for Web window. Type in a new file name, if you wish, and then click Save.

Photoshop’s Save for Web options are indispensable for optimizing photographic images. Use them whenever you prepare images for the Web.