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.

Summary

This hour has shown you how to use the <img /> tag to place graphics images on your web pages. You learned to include a short text message to appear in place of the image as it loads and to appear whenever someone moves the mouse pointer over the image. You also learned to control the horizontal and vertical alignment of each image and how to make text wrap around the left or right of an image.

Finally, you learned how to take advantage of thumbnail images that link to larger images as means of improving the layout of pages. This required using the same <a> tag introduced in Hour 3. What you didn't see is how to use images as custom page backgrounds, which is coming up next , in Hour 9, "Custom Backgrounds and Colors."

Table 8.1 summarizes the attributes of the <img /> tag covered in this hour, along with relevant style properties.

Table 8.1. HTML Tags and Attributes Covered in Hour 8

Tag/Attribute	Function
`<img />`	Places an image file within the page.

Attributes
`src="` `address` `"`	The address or filename of the image.
`alt="` `altdescription` `"`	An alternative description of the image that is displayed in place of the image, primarily for users who can't view the image itself.
`title="` `title` `"`	A text message that is displayed as an image title, typically in a small pop-up box (tool tip) over the image.
`width="` `width` `"`	The width of the image, in pixels.
`height="` `height` `"`	The height of the image, in pixels.
`style=" border-style :none"`	Gets rid of the border around the image if it is serving as a link.
`style=" vertical-align :` `alignment` `"`	Aligns the image vertically to `text-top` , `top` , `text-bottom` , `bottom` , `middle` , or `baseline` .
`style="float:` `float` `"`	Floats the image to one side so that text can wrap around the other. Possible values are `left` , `right` , and `none` (default).