How to Use the Photoshop Save for Web Tool

Balance image quality with size

A Macbook Air running Photoshop

Pixabay

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.

  1. Open the image you want to save in Photoshop.

  2. 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.

    An image open in Photoshop with the Image Size menu option highlighted
  3. Enter a new width in the Width field, and select Pixels. In this case, enter 400 pixels and click OK.

    The Image Size dialog box in Photoshop with the width window and OK button highlighted
  4. 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.

    An image open in Photoshop with the Save for Web and Devices menu item highlighted
  5. 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 Save for Web & Devices window in Photoshop with the 2Up option highlighted
  6. 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.

    Save for Web & Devices window in Photoshop with the quality slider and presets highlighted
  7. 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.

    Image type menu in Photoshop's Save for Web window
  8. 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.

    Save for Web & Devices window in Photoshop with the Image Size and Percent areas highlighted
  9. 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.

    Photoshop's Save for Web & Devices window with the image size and type readout highlighted
  10. Once you are satisfied with the photo, click the Save button.

    Save for Web & Devices window in Photoshop with the Save button highlighted
  11. Type a name for your photo, and then click Save again.

    Save As dialog box in Photoshop with the Save button highlighted
  12. You now have an optimized, web-ready photo.