Images are displayed in a web page using an <img> tag. Attributes added to the tag tell the web browser where to find the image, and how wide and tall it should be displayed. One of the worst things to do is to use the width and height of an IMG tag to force the image to a new size.

Resizing using smaller Width and Height

The image above is actually 630 x 420 pixels, but using the IMG tag Width attribute I made the browser resize the image to 250 pixels wide.

The IMG tag used to display the image above looks like this:
<img src=… width=250>

Using this method forces the browser to reduce the size of the image before it is displayed. This will give you very different results with each browser. In this image the diagonal lines created by the top and bottom of the cabinetry have some serious jagged artifacts. The rungs on the stools suffer too. The image has also lost some sharpness. Compare it to the original image here: Remodeled Kitchen. By leaving off the Height attribute the browser will size the image proportionally.

That is not really the worst thing you can do. This is.

Resizing using larger Width

The image above uses a width of 800 and a height of 250 to stretch the image far wider than it should be, resulting in distorted proportions. Relying on the browser to size an image is not the best option.

The IMG tag used to display the image above looks like this:
<img src=… width=800 height=250>

This time the width and height were specified exactly, resulting in the browser stretching the image beyond it’s original proportions.

Resizing and processing an image for a specific use on the web is going to give much better results.

Processing Images For The Web (Part 1) - Introduction
Processing Images For The Web (Part 3) - Proper Resizing
Processing Images For The Web (Part 4) - Sharpening (not just for knives)

Digital Photography photoshop, sharpening, web