Resizing Images for the Web

Simply changing the dimensions of an image in your HTML is never an acceptable method of resizing your photographs for web use. Entering different dimensions than the actual dimensions of the image on your server can give the photograph a distorted appearance.

More importantly, if you are using this method to display thumbnails (smaller images) the download time is identical to actually displaying the full sized image. This can lead to unacceptable load times for the pages on your website.

The average internet users are not very patient. If your site takes too long to load, they are likely to simply move on to another website to find what they are looking for. I feel that it is important to note that nearly 50% of the people surfing the web are estimated to still be using dial-up connections to access the internet.

Even if the actual percentage was much lower, I would recommend asking yourself how many customers you are willing to risk losing over something that can be so easily corrected.

All of your photographs (and graphics) must be properly resized and optimized in an imaged editor BEFORE they are added to your website.

Although I am writing this tutorial for Adobe Photoshop Elements 4.0 users, you will find that the basic process is almost identical using previous versions of Photoshop Elements, and several versions of Paint Shop Pro, and even PhotoImpact.

The first step to properly resizing an image is to open the lossless file format of your photograph in Photoshop Elements 4.0 so that we can preserve the quality of the original.

I recommend completing any necessary image editing (such as color corrections) to the full size image BEFORE resizing your photograph.

Once you are ready to begin resizing the photograph, from the menu, select: Image > Resize > Image Size

View Screenshot

A new box (window) will open to resize your photograph. Place a checkmark in scale styles, constrain proportions, and resample image. The drop down menu next to resample image should say bicubic.

Within the pixel dimension section of the box, change either the width or the height of the image and let the other resize automatically so that the image resizes proportionately. Click OK.

View Screenshot

When you make more than minimal changes to the dimensions, your photograph may no longer appear as sharp as it did to begin with. You can restore the original sharpness by using the unsharp mask.

From the menu, select: Filter > Sharpen > Unsharp Mask

View Screenshot

A new box (window) will open to set your unsharp mask preferences. Choosing the right settings takes some practice in the beginning, as you will need to experiment to find which settings work best for the specific photograph you are working with.

I usually start with amount set at about 50% . For photos intended for web use, I keep the radius set at about 1.0 pixels. The default setting for threshold is zero but you may want to experiment with results by increasing this one to three levels.

View Screenshot

Preview your photograph while you are experimenting until you find the best settings. Be careful not to over sharpen the image, as the goal is to end up with a very natural appearance.

I do recommend taking the time to learn more about how the unsharp mask works, both in the help files of Photoshop Elements, and by reading various tutorials available on the net.

Once you are happy with your results save the changes.

The final step before uploading the photograph to your website will be to learn to properly optimize it for web use.

J. Cricket Walker

Small Business Marketing Consultant and Scenic Photographer
Copyright © 2006 J. Cricket Walker of Online Photography Magazine All Rights Reserved

Leave a Reply