How to Use the Photoshop Save for Web Tool GA S REGULAR Menu Lifewire Tech for Humans Newsletter! Search Close GO Software & Apps > Design 78 78 people found this article helpful

How to Use the Photoshop Save for Web Tool

Balance image quality with size

By Eric Miller Eric Miller Writer New York University Eric Miller is a former Lifewire writer, freelance graphic designer, and owner of a web development and graphic design studio established in 1998. lifewire's editorial guidelines Updated on December 18, 2021 Reviewed by Lisa Mildon Reviewed by Lisa Mildon Southern New Hampshire University Lisa Mildon is a Lifewire writer and an IT professional with 30 years of experience. Her writing has appeared in Geekisphere and other publications. lifewire's editorial guidelines Tweet Share Email Tweet Share Email Design Graphic Design Photoshop Animation & Video 3D Design

What to Know

Open an image in Photoshop. Select Image > Image Size. Enter a new width, and then select Pixels > OK.Choose File > Save for Web and Devices. Choose the 2-Up tab to see the original and optimized images side by side.Change the Quality value and view the results. Make adjustments to the size or file type if needed. Select Save and name the new image. This article explains how to use Photoshop's Save for Web tool to optimize images for use on the web. This information applies to Photoshop 20.0.10 and later. Commands and menu options may differ between versions.

How to Save for Web in Photoshop

Graphic designers, web designers, and others who create content for the web, also create web-ready images such as photos for websites and banner ads. Before uploading these images, they optimize the images to download and display quickly in a web browser. Here's how to use the Save for Web tool in Photoshop to get the right balance of image quality and file size for your images. Open the image you want to save in Photoshop. Select Image > Image Size. Or, for PC, press Alt+Ctrl+I, for macOS, press Command+Option+I on the keyboard. 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. Select File > Export > Save for Web (Legacy). Or, use the keyboard shortcut: Alt/Option+Command+Shift+S. 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. 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. 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. Change the file type, if needed, to JPEG, GIF, PNG-8, PNG-24, or WBMP. Change the size of the image, if needed. Enter a width or height, or scale it by a percentage. Click the chain link icon to change the proportion of the image. Otherwise, enter a different width or height to change the other value in proportion. 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. When you're satisfied with the photo, select Save. Type a name for the photo, then click Save.

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.
Was this page helpful? Thanks for letting us know! Get the Latest Tech News Delivered Every Day Subscribe Tell us why! Other Not enough details Hard to understand Submit More from Lifewire How to Resize Multiple Files with Photoshop Elements How to Resize an Image in Photoshop 10 Best Free Photo Resizers The 5 Best Alternatives to Photoshop for Android How to Make a GIF in Photoshop Preparing Images for Mobile Devices How to Make High-Resolution Images How to Use the Photoshop Background Eraser Tool How to Resize an Image on Mac How to Create the Out of Bounds Effect in Photoshop 10 Best Free Photo Editing Programs How to Edit, Reposition, and Compress Images in Microsoft Word PCT File (What It Is & How to Open One) Greeting Card Template and Instructions for Adobe Photoshop Creating and Using Custom Brushes in Photoshop Elements How to Use the Photoshop Clone Stamp Tool Newsletter Sign Up Newsletter Sign Up Newsletter Sign Up Newsletter Sign Up Newsletter Sign Up By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. Cookies Settings Accept All Cookies