Optimizing Images for the Web

Sytze van der Laan, Cleveland Clinic Lerner Research Institute

Optimizing an image for the web is very easy, especially with software like Adobe Photoshop. For this tutorial, I'm using screenshots of Photoshop Elements version 5 for the PC. At a price below $100 and at least $500 less than the full version of Photoshop, it contains all the features you'll need, and then some, for editing web graphics. I'm recommending Elements to all our web editors unless you already have purchased the full Photoshop software, off course.

Introduction

As a web editor, you'll often be asked to "spruce up a web page". That usually mean you're going to be handed images from a digital camera, a scanner, or worse, a Powerpoint file. The problem with these images is the file size and the dimensions. When we're publishing web content for screens with varying widths (320 pixels for hand-held devices to more than 1920 pixels for laptop and desktop computers), it is good to keep in mind that most web visitors will not appreciate when you insert an original 1600 x 1200 digital camera shot in a web page. Apart from the fact that it will break the layout of many web templates, when web visitors are downloading large images it will also cause an unnecessary burden on the web server. That is, if the web visitors are patient enough for the bloated page to be displayed.

There are only 3 steps you'll need to remember to optimize any image for the web:

1. Crop
2. Resize
3. Sharpen

Step 1: Cropping

You want to crop an image to show only the area of the image that has interesting content. Select the Crop tool in Photoshop from the panel on the left. Draw a rectangle somewhere in the image. You don't have to be very precise with this tool, as you can still change the selection later by dragging the handles. Double-click within the selected area and the image will now have new dimensions.

Step 2: Resizing

After you've cropped the image, the file size is usually still too large (64 Kb is the default upload limit in Contribute). Under the "Image" tab at the top menu, select "Resize" and then "Image Size" (this may vary in different versions of the software)

Select a width that works best within the allotted space of the web template. The LRI web templates have a set width for the content area of 550 pixels, so it is recommended to start with a width of 300 px or less if you want to be able to display some of the text next to the image.

Step 3: Sharpening

Resizing an image often causes the image to look fuzzy. To make it look crisp like the larger original again, use the Sharpening Filter called "Unsharp Mask". Under the "Enhance" tab at the top menu, select "Unsharp Mask" (again, this may vary in different versions of the software).

Just make sure to keep it within reason, so use something between 50-120%. Please be considerate of portrait photography and keep the sharpening at 75% or less.

Save for Web

Finally, use the "Save for Web" option under the "File" menu to save the optimized image somewhere on your computer where you can insert it in your web page with Contribute and upload it to the staging web server.

Related Links:

• Creating a New Web Page with Contribute
• Extracting backgrounds