Search Query

Web Page Images

Photoshop has always been the tool of choice among web designers for photographs and images, and with version 5.5, Adobe has beefed up these capabilities significantly. This month, I will highlight some of these features and talk about how to you can use them to improve images on your web site.
Once you have chosen or created the image that you want on your web page, you’ll need to size it appropriately to fit your page. A typical web page is about 550 pixels wide, so using the Image Size dialog box, sample the image down (if needed) to the size you want it to appear in the web browser. In this example, this image is going into a gallery page, so I want it to be 500 pixels wide. Make sure that you have the Resample Image button checked to be able to change the size in pixels (Figure 1).
Fig. 1
If the image has been drastically resized, you may want to sharpen it with the Unsharp Mask filter (Filter: Sharpen: Unsharp Mask). You should experiment with the settings, but for this example I used an Amount of 300, a Radius of 0.3 pixels, and a Threshold of 2 (Figure 2).

Fig. 2

To save this image for the web, Adobe has included the appropriately named Save for Web command in the File menu. This dialog box shows you multiple previews of the image at the compression setting that you have chosen (Figure 3).
Fig. 3
From this box you can your image save in the JPG, GIF or the newer PNG formats. You can also set the compression levels for the file format you chose. For this example, I’m using JPG since my image is a photograph (GIF file typically work best for graphic-type images). Note that this dialog box also shows you what the file size (20k) of the image will be and the approximate download time (8 seconds). You can also preview the image in your web browser. Photoshop will even write an HTML file for the image (Figure 4), although it is very bare bones with just the image on a white background. The Save for Web command is better than the standard Save As… command because it does not include any of the previews or custom icons of the standard Photoshop JPG file.
Fig. 4
Paul Vaughn is the Director of Digital Services at River City Silver, the premiere photographic and digital imaging laboratory in San Antonio and South Texas. Mr. Vaughn is a graphic artist with galleries galore on his web site at, he can be contacted at

|| Home || Graphics Guy || Mac Guy || Gallery || Payment || ||

This site and all images and text contained in it are ©2006 Paul Vaughn.
(Unless otherwise noted)
Questions? Problems?