Specifying Image Width and Height

Specifying Image Width and Height

Because text moves over the Internet much faster than do graphics, most web browsers will display the text on a page before the images. This gives people something to read while they're waiting to see the pictures, which makes the whole page seem faster.

You can make sure that everything on your page appears as quickly as possible and in the right places by explicitly stating each image's width and height. That way, a web browser can immediately and accurately make room for each image as it lays out the page and while it waits for the images to finish transferring.

Did you Know? Although specifying the width and height of an image can help web browsers render a page a bit quicker, it can also be a pain if you're developing pages in which the image sizes still aren't set in concrete. You don't want to have to constantly be changing the width and height attributes as you're tweaking images on a page. For this reason, you can think of the width and height attributes of the <img /> tag as somewhat of an optimization that you apply when a page is ready to be published.

For each image on your page, use Paint Shop Pro or another graphics program to find out the exact width and height in pixels. (In Paint Shop Pro, this information appears in the lower-right corner of the main window when you move the mouse over any part of an image.) Then include those dimensions in the <img /> tag, like this:

<img src="myimage.gif" alt="" width="200" height="100" />

Did you Know? The width and height specified for an image don't have to match the image's actual width and height. The web browser program will try to squish or stretch the image to whatever size you specify. However, this is generally a bad idea because browsers aren't particularly good at resizing images. If you want an image to appear smaller, you're definitely better off resizing it in an image editor. Allowing a web browser to resize an image usually makes it look very ugly due to the squishing or stretching, but there is one excellent use for it: You can save a very small, totally transparent image and use it as any size spacer by specifying the width and height of the blank region you want to create on your page. This is a clever trick that some web designers use when they're in a pinch with a difficult page layout.