As a graphic designer, you may often be asked to deliver web-ready images, such as photos for a web site or banner ads. The Photoshop “Save for Web” tool is a simple and easy way to prepare your JPEG files for the web, helping with the trade-off between file size and image quality.
NOTE: For this tutorial, we are looking at saving JPEG images. The Save for Web tool is also built to save GIF, PNG, and BMP files.
What Makes a Graphic “Web-Ready?”
- Resolution is 72 dpi
- Color mode is RGB
- Generally reduced in file size for faster loading web pages
Open a Photo
To practice with the “Save for Web” tool, open an image in Photoshop; click “File>Open,” browse for the image on your computer, and click “Open.” For the purposes of this tutorial, a photo will work well, though any type of image will do. Resize your photo to a small size that you may use on a web site. To do this, click “Image>Image Size,” enter a new width in the “Pixel Dimensions” box (try 400) and click “OK.”
File > Save for Web
Now lets assume somebody asked you to deliver this photo, at 400 pixels wide, ready to be posted on a web site. Click “File>Save for Web” to open the Save for Web dialog box. Take a moment to browse the different settings and tools in the window.
A "2-Up" Comparison
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), or a comparison of 2 or 4 versions of your photo. Choose “2-Up” to compare the original photo with the optimized one. You will now see side-by-side copies of your photo.
Choose the "Original" Preset
Click on the photo on the left side to select it. Choose “Original” from the Preset menu on the right side of the Save for Web window (if not already selected). This will put a preview of your original, unedited photo on the left side.
"JPEG High" Preset
Click on the photo on the right side to select it. Choose “JPEG High” from the Preset menu. You can now compare your optimized photo on the right (which will eventually be your final file) with your original on the left.
File Size and Loading Speed
The most important setting in the right column is the “Quality” value. As you lower the quality, your image will look “muddier” but your file size will go 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 your photo. Photoshop also gives you the estimated loading time below the file size. You can change the connection speed for this loading time by clicking the arrow above the optimized photo preview. The goal here 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. Try using the preset quality levels (ie JPEG Medium) to save time.
Name Your Photo and Save
Once you are satisfied with your 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.
