How to Use the Photoshop Save for Web Tool

Balance image quality with size

A Macbook Air running Photoshop

Pixabay

by Eric Miller
A freelance graphic designer and owner of Eric Miller Design, a web development and graphic design studio established in 1998.
Updated October 15, 2019

Graphic designers, web designers, and others that create content for the web, also create web-ready images such as photos for websites and banner ads. Before uploading these images, the images are optimized to download and display quickly in a web browser.

The Save for Web tool in Photoshop is an easy way to prepare JPEG files for the web. This tool also saves GIF, PNG, and BMP files. Here's how to use the Save for Web tool to get the right balance of image quality and file size for your images.

Instructions in this article 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 a raw file into a format that other people can use easily. Here's how to use it to optimize images.

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

  2. Select Image > Image Size. Or, press Alt/Option+Command+I on the keyboard.

    An image open in Photoshop with the Image Size menu option highlighted

  3. In the Width field, enter a new width, select Pixels, then select OK.

    Resize the photo to a small size that can be used on a website.

    The Image Size dialog box in Photoshop with the width window and OK button highlighted

  4. Select File > Save for Web and Devices. Or, press Alt/Option+Command+Shift+S on the keyboard.

    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.

    An image open in Photoshop with the Save for Web and Devices menu item highlighted

  5. In the Save for Web window, go to the Original, Optimized, 2-Up, and 4-Up tabs. These tabs switch between a view of the original photo, the optimized photo with the Save for Web settings applied to it, or a comparison of two or four versions of the photo.

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

    The Save for Web & Devices window in Photoshop with the 2Up option highlighted

  6. Change the Quality value. As you lower the quality, the image looks muddier, and the file size goes down. Smaller files mean faster-loading web pages.

    Find a happy medium between file size and quality. A quality between 40 and 60 is a good range. 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. Change the file type, if needed, to JPEG, GIF, PNG-8, PNG-24, or WBMP.

    Image type menu in Photoshop's Save for Web window

  8. Change the size of the image, if needed. Enter a width or height, or scale it by a percentage.

    Click the lock icon to change the proportion of the image. Otherwise, enter a different width or height to change the other value in proportion.

    Save for Web & Devices window in Photoshop with the Image Size and Percent areas highlighted

  9. The values below the image preview display the file type, size, and how long the image will take to open on a website. These numbers update as you make changes.

    Photoshop's Save for Web & Devices window with the image size and type readout highlighted

  10. When you're satisfied with the photo, select Save.

    Save for Web & Devices window in Photoshop with the Save button highlighted

  11. Type a name for the photo, then click Save.

    Save As dialog box in Photoshop with the Save button highlighted

  12. You now have an optimized, web-ready photo.