How to Use the Photoshop Save for Web Tool

As a graphic designer or web designer, you may be asked to deliver web-ready images, such as photos for a website or banner ad. The Photoshop Save for Web tool is an easy way to prepare your JPEG files for the web, helping with the trade-off between file size and image quality.

For this tutorial, you are saving JPEG images. The Save for Web tool is also built to save GIF, PNG, and BMP files.

Most web-ready graphics share common characteristics:

• Resolution is 72 dpi.
• Color mode is RGB.
• Files are reduced in size for faster-loading web pages.

To practice with the Save for Web tool, open an image in Photoshop.

Click File > Open, browse for the image on your computer, and click Open. For practice purposes, a photo works well, although any type of image will do.

Resize the photo to a small size that you could use on a website. To do this, click Image > Image Size, enter a new width in the Width field, and select Pixels. In this case, enter 400 pixels and click OK.

Assume somebody asked you to deliver a photo at 400 pixels wide, ready to be posted on a website.

Click File > Save for Web to open the Save for Web dialog box. (In later versions of Photoshop, the path is File > Export > Save for Web.)

Browse the different settings and tools in the window.

At the top of the Save for Web window are a series of tabs labeled Original, Optimized, 2-Up, and 4-Up. By clicking these tabs, you can switch between a view of your original photo, your optimized photo with the Save for Web settings applied to it, or a comparison of two or four versions of your photo.

Choose 2-Up to compare the original photo with the optimized one by showing side-by-side copies of the image.

Click on the photo on the left side to select it. Choose Original from the Preset menu on the right side of the Save for Web window (if it is not already selected). This puts a preview of the original, unedited photo on the left side.

Click on the photo on the right side to select it. Choose JPEG High from the Preset menu. You can now compare the optimized photo on the right, which will be your final file, with the original on the left.

The most important setting in the right column is the Quality value. As you lower the quality, your image looks muddier, but the file size goes down, and smaller files mean faster-loading web pages.

Try changing the quality to 0 and notice the difference in the photos on the left and right, as well as the smaller file size, which is located beneath the photo. 

The goal is to find a happy medium between file size and quality. A quality between 40 and 60 is usually a good range, depending on your needs. Try using the preset quality levels (JPEG Medium, for example) to save time.

Once you are satisfied with the photo on the right, click the Save button. The Save Optimized As window opens. Type a file name, browse to the desired folder on your computer, and click Save. You now have an optimized, web-ready photo.