catcode.com > Guide to Images > Width and Height

Specifying Width and Height

What we've shown you so far works just fine. However, we can improve its performance from the user's point of view. Consider this fragment of HTML:

Here is a picture of Tabitha, the cat.
<img src="tabitha.jpg" alt="Black domestic shorthair"
	title="Black domestic shorthair" />
Such a lovely animal!

Here's what happens when you load the page:

Netscape Internet Explorer
  1. Put text “Here is a picture...” on the screen.
  2. Request tabitha.jpg from the server.
  3. Wait until enough of the image downloads so that you can find out the width and height of the image.
  4. Allocate that much room on the page.
  5. Put text “Such a lovely animal!” on the screen, and continue loading image.
  1. Put text "Here is a picture..." on the screen.
  2. Request tabitha.jpg from the server.
  3. Reserve a small amount of room for the image.
  4. Put text “Such a lovely animal!” on the screen.
  5. When enough of the image has downloaded so that you know the actual width and height of the image, push the text aside to make room for the picture, and continue loading image.

If you don't specify an image's dimensions, then Netscape will appear to take longer to render a page, and Explorer will re-flow the text as the images come in. Both of these can annoy the people reading your pages.

When you create an image or scan it, your graphics editor will tell you its dimensions. You can put them into the <img> element, as follows:

Here is a picture of Tabitha, the cat.
<img src="tabitha.jpg"
   width="115" height="144"
   title="Black domestic shorthair" alt="Black domestic shorthair" />
Such a lovely animal!

Now the page loads on both browsers in this sequence:

  1. Put text “Here is a picture...” on the screen.
  2. Allocate a space 115 pixels wide and 144 pixels high for tabitha.jpg.
  3. Request tabitha.jpg from the server.
  4. Put text “Such a lovely animal!” on the screen, and continue loading image.

Although the total amount of time required to load the data is identical, the page appears to plot faster and/or more smoothly. The effect is purely psychological, but your readers will appreciate it nonetheless.

<< Alternate Text
^ Index