While your image editor is open, make sure the image is the same size (at 72 dpi) as it will appear on the Web page. In your HTML, use the WIDTH and HEIGHT attributes of the <IMAGE> tag to restate the image's actual dimensions. This allows the browser to lay out the rest of the page while the image is still downloading — so folks have something to read while they wait — and ensures that people surfing with "images off" will still see the page in its proper layout.
If you're using tables on your page, image dimensions take on a special importance since dimensionless images sometimes force browsers to clear and re-render the page. This occurs when a browser starts building the table's structure according to the HTML-specified <TABLE> and <TD> dimensions and then, belatedly, discovers that an image lacking HTML dimensions is, in fact, too large to fit. Browsers will then re-render the table to accommodate the unwieldy image. This inefficient page rendering takes time, and it's unpleasant for the user to see page elements move around, or disappear and reappear.
You probably know this already, but when it comes to the WIDTH and HEIGHT attributes, the most important thing to remember is never use them to re-size or adjust the shape of graphics on your pages! Re-sizing via HTML is super-bad for two reasons. First, if you increase an image's dimensions larger than the image's actual size (at 72 dpi), you'll end up with a jagged picture.
Secondly, you'll take a nasty performance hit. Using HTML to make an image appear smaller than its true size doesn't always look as bad, but much more data gets downloaded than the browser actually needs for drawing the image, thus adding to the download time.
Rules, of course, are made to be broken, and there is one case where it's acceptable to fracture this rule. If you've been browsing HotWired and Webmonkey long enough.
In this case, both pictures are actually the same GIF file, so they take the exact same amount of time to download. However, the one on the right has been doubled in size via the WIDTH and HEIGHT attributes of the IMG tag. There isn't any jaggedness because this image lacks any curves or diagonal lines. If you've got a logo or design that's all right angles (lucky dog), you can use a super-small GIF (which downloads cheetah-quick) and then re-size it to your heart's content in HTML — just remember to keep the dimensions proportional.
You artsy folks out there might want to experiment with using HTML to re-size all sorts of images for creative effect (certainly the designers here at HotWired used to enjoy it). Of course, only you know if the company president will care if you take the "artsy approach" with his photo.
Home
