How to Use the Photoshop Save for Web Tool

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

The Save for Web tool can also save GIF, PNG, and BMP files.

These instructions apply to Photoshop 5.5 and later. Commands and menu options may differ between versions.

What Makes a Graphic Web-Ready?

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.

How to Save for Web in Photoshop

Save for Web isn't a tool, like the Marquee, Move, or Magnetic Lasso. It's a way to export your raw file into a format that other people can use easily. Here's how to use it to optimize your images.

Open the image you want to save in Photoshop.
Resize the photo to a small size that you could use on a website. To do this, click Image > Image Size.

You can also press Alt/Option-Command-I on your keyboard.
Enter a new width in the Width field, and select Pixels. In this case, enter 400 pixels and click OK.
Click File > Save for Web and Devices to open the Save for Web dialog box.

In other versions of Photoshop, the path is File > Export > Save for Web. The item may be called "Save for Web" or "Save for Web and Devices."

You can also press Alt/Option+Command+Shift+S on your keyboard.
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.
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. Use the preset quality levels (JPEG Medium, for example) to save time.
To change the file type, use the menu in the upper-right corner. You can save as JPEG, GIF, PNG-8, PNG-24, and WBMP.
If you change your mind about the size of your image, you can also change that here. You can either enter a width or height in the boxes or scale it by a percentage.

Click the lock icon to change the proportion of the image. Otherwise, entering a new width or height will change the other value in proportion.
The values in the bottom-left of the window show the file type, size, and how long it will take to open on a website. These numbers update as you make changes in this window.
Once you are satisfied with the photo, click the Save button.
Type a name for your photo, and then click Save again.
You now have an optimized, web-ready photo.