The Photoshop “Save for Web” tool is a simple and easy way to prepare your JPEG, PNG and GIF files for the web. It allows you to create a compromise between image quality – obviously you want your images to look great on the web, and file size – because you want your images to download quickly.
For this tutorial I’m just going to talk about saving JPEG images because most of the time, that is the most suitable format for photographs. The Save for Web tool is also built to save GIF, PNG, and BMP files.
What Makes a photograph or illustration “Web-Ready?”
• Resolution is 72 dpi
• Color mode is RGB
• File size is reduced for faster loading web pages
1. To practice with the “Save for Web” tool, open any photographic-style image in Photoshop; click File > Open, browse for the image on your computer, and click “Open.”
2. The image I’m using here is one I took with a digital camera and has image dimensions 3872 x 2592 with a resolution of 300ppi. This is far too large to use on a website so I’ll resize it before saving it. (Although you can actually resize the image in the Save For Web dialog box too)
3. To resize your image, choose Image > Image Size, enter a new width in the Pixel Dimensions box (I’m going to set mine to 900 pixels wide), make sure that Constrain Proportions is checked – this makes sure both the width and height change proportionally and click OK. We don’t need to change the Resolution here, because Save For Web will do that automatically.
4 Click File > Save for Web to open the Save for Web dialog box. When it opens it looks like this.
6. In the top left corner 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), and a comparison of 2 or 4 versions of your photo.
Select 2-Up to compare your original photo with the optimized one. You will now see two copies of your photo.
7. Click on the photo on the left side to select it. On the Preset menu on the right side of the Save for Web window (if not already selected) choose “Original”. This will put a preview of your original, unedited photo on the left side.
8. Click on the other copy of the photo on the right side to select it. The Preset will say “Unnamed”. Choose “JPEG” from the dropdown menu below the Preset. You can now compare your optimized photo on the right (which will eventually be your final file) with your original on the left.
9. The most important setting in the right column is the “Quality” value. As you lower the quality, your image will look start to look messy and often more pixelated but your file size will go down, and smaller files mean faster loading web pages. Try changing the quality to “0”. You’ll see that your picture looks rubbish, compare the difference in the photos on the left and right, as well as the smaller file size, which is located beneath your photo.
The idea here is to find a compromise between file size and quality. A quality setting between around 60 and 70 is usually a good place to start, depending on your needs. You could also try using the preset quality levels (e.g. JPEG Medium) and see how your image is affected.
10. When you’re happy with your optimized photo on the right, click the “Save” button.
The “Save Optimized As” window will open. Type a file name, browse to the desired folder on your computer and click “Save.” You now have an optimized, web-ready photo.