Image Attributes

You can use other attributes of the <img /> tag to change the image size. Table 8.1 shows some of these attributes, and the following sections provide some examples for adding these attributes to your documents.

Table 8.1. Attributes Used with the <img /> Tag

Attribute	Values	Description of Use
height	Pixel or percent	Specifies the height of an image.
width	Pixel or percent	Specifies the width of an image.

Adjusting the Height and Width

You can adjust the size of your image using the height and width attributes. You can set these attributes to a fixed pixel size or a percentage of the page size. Look at the following sample HTML lines. The first line sets the happy face image from Figure 8.1 to a fixed pixel size of 60 pixels high and 60 pixels wide. The second line sets the same image to 6% of the page width and 10% of the page height. Figure 8.3 shows how both of these look in the browser.

<img src="/books/1/174/1/html/2/http://www.thingstobehappyabout.com/face2.gif"  alt="This looks just like me!" height="60" width="60" /> <img src="/books/1/174/1/html/2/http://www.thingstobehappyabout.com/face2.gif"  alt="This looks just like me!" height="10%" width="6%" />

Figure 8.3. The height and width attributes control the size of the image.

The Web browser interprets pixels and percentages equally well when rendering an image. You need to remember, however, that your Web visitors may not use the same monitor display settings that you do. What does this mean to you? My monitor is set to 800 pixels wide. In the preceding HTML sample, I set the happy face image to 6% of the page width, or 48 pixels wide. If I viewed the same page on a monitor set to 1024 pixels wide, that same 6% of the page width would now equal 61 pixels, which is much wider than I wanted.

If you truly want the image to be a certain percentage of the page (as you might for a graphical line), then use percentages. Using percentages ensures that the image will take up the space you want it to. If you want the image to appear a specific size, use the pixel setting.

Caution

Be sure to change both the height and width of your image if you plan to resize them. Adjusting only one of them will stretch the image out of proportion. An alternative is to resize the image in your image editor.

Tip

Create the illusion of faster image loading. Regardless of whether you're resizing an image or not, you should always include the height and width attributes because they give the browser important information about how much space will be required to show the image on the page. This way, the browser can set that space aside and continue building other aspects of the page even while the image downloads. This gives the impression that the page loads faster since the viewer doesn't have to wait for the entire image to download before looking at other areas of the page.

Aligning Text and Images

You can use the align attribute of the <img /> tag to force an image to appear on the left or right of a section of text. You can see an example of this attribute in action in Figure 8.4.

<img src="/books/1/174/1/html/2/http://www.thingstobehappyabout.com/face2.gif"   alt="This looks just like me!" height="60" width="60"   align="right" />

Figure 8.4. Notice how the align attribute forces the image to align with the text.

You also can use the align attribute to vertically align an image with the text. The align attribute has three more values: top, bottom, and center, which are discussed in the following list. Figure 8.4 shows you a sample HTML document using the vertical alignment properties.

• Setting the align attribute to top aligns the top of the image with the top of any surrounding text.

• Setting the align attribute to bottom aligns the bottom of the image with the bottom of any surrounding text.

• Setting the align attribute to center aligns the center of the image with the center of any surrounding text.

Caution

Be sure to preview your HTML documents in the browser (or in several browsers) to make sure that you are happy with how they look before you publish them. Not all browsers treat these align attributes in the same way.