Resizing Images

If you are lucky, the image you want to insert in your document is the size you need. If not, you'll need to resize the image to meet your needs.

Image size is controlled by two attributes of the <img> tag: HEIGHT and WIDTH. As you can probably guess, these attributes specify the height and width, in pixels, of the image you've placed in your document. If the image you specified with the SRC attribute does not match these sizes, it will be stretched or shrunk to fit.

To see the effects of these attributes on an image, we're going to use this simple 100 x 100 image:

To change this to a 200 x 200 image, you could add HEIGHT="200" WIDTH="200" to the <img> tag and get:

Conversely, we can make it smaller by setting HEIGHT and WIDTH to 50:

Right away, you can see the downside of image resizing: Depending on your browser, you may notice jagged edges in the color blocks in the large image, and missing pixels in the smaller image. This leads to a useful bit of advice: Don't explicitly resize images unless you absolutely have to. Instead, create the desired size using an image editor (like Photoshop), where you can repair jagged edges and missing pixels before publishing the image on your site.

If you are resizing the image, don't forget that you need not adjust the HEIGHT and WIDTH in equal amounts. You can also make the height larger and the width smaller:

Again, you will probably only use this feature when trying to achieve a specific effect with your images.

Scaling images

Most of the time, it makes more sense to scale an image instead of resizing its height and width. If you specify either HEIGHT or WIDTH, the browser will compute the other image dimension, scaled to match. Thus if you set the height to 200 pixels, with the original image being 100 pixels tall, the browser will compute the width to be twice the original width as well.

This kind of image scaling is always preferable to specifying both image dimensions. If you change the image's size, your page will still look correct because the browser will scale the image appropriately based upon its new size. If nothing else, scaling saves you the trouble of doing the math to compute both dimensions of the image.

The last kind of image scaling involves resizing the image to match the current text flow size. If you provide a percentage value to the WIDTH attribute, the browser will scale the image so that it's width matches that percentage of the text flow width. For example, using WIDTH="75%" creates an image that is scaled accordingly:

You can mix and match these, of course. Here is the image, just 10 pixels high but stretched to fill 60 percent of the text flow:

Note that setting the HEIGHT attribute to a percentage value doesn't make much sense, since HTML documents tend to have a variable length. Browser behavior varies when you do this; most use the height of the current window as the base value when computing a percentage height. In general, this is not much use, but to satisfy your curiosity, here is our image with the height set to 50 percent. What did your browser do?

All sorts of image effects are possible with image sizing and scaling. Play around with them a bit; next week, we'll take a look at image borders and alignment.

Next: Image Borders and Alignment

Previously in Tag of the Week:

Basic Image Insertion
Building Forms with Tables
Life Without Mice