I'd like to continue the discussion of images that I started in last week's column. We talked last week about making your images as small as possible, and we talked in a previous column about controlling space. Now it's time to merge those ideas and talk about the HEIGHT and WIDTH extensions to the <IMG> tag.

Let's look at my scaled-down image of Detective Logan from last week and the code that produced it.

<IMG HEIGHT=287 WIDTH=112 SRC="logan-only.gif"
ALT="">

The HEIGHT=287 WIDTH=112 in the code specifies the dimensions of the image in pixels. But why include this optional bit of information if it's a pain in the neck to determine the dimensions of your image and type extra characters--especially if you'll have to respecify the HEIGHT and WIDTH should you crop or enlarge your image? I can think of three reasons.

First, specifying HEIGHT and WIDTH keeps you in touch with the size of your images, reminding you exactly how much space they're taking up. This is an easy thing to forget or overlook if you are working on a PC with a Super VGA monitor or a Mac with a 17" or 20" monitor at 832x624 or 1024x768-pixel resolution. The resolution of a standard VGA monitor is 640 pixels wide, so you can't assume that you have any more than that to work with.

Second, it could speed the loading of your page because the browser will know how much space to reserve for the images right from the beginning.

Third, if for some reason the image does not load (e.g., there's a typo in the <IMG> tag, the user has turned off image loading on her browser, or the browser loads all the text first and then the images), the boundaries of the empty image box will be the same as the that of the image, thereby preserving your layout.

If you crop your image but forget to change the HEIGHT and WIDTH specifications in your <IMG> tag, HEIGHT and WIDTH can also be used to resize images on the fly. However, I wouldn't recommend doing this, especially not with GIF images.

First, if you don't maintain the proportions of the image, your image will skew (as mine did in the cropped example above). Second, by resizing an indexed-color (GIF) image, you're inviting a major case of the jaggies. Third, while resizing a JPEG image shouldn't hurt image quality, why would you want to load an image with a file size larger than absolutely necessary? By performing the resize in your image-editing editing application and uploading the new file to the server, you'll have fewer bytes to load into your HTML document.

Believe it or not, I still have more to say about images! Next week we'll talk about how to add color and "spice" to your pages when you don't have any relevant graphics.

Past installments of Design Diary