A Complete Guide to Web Design

160 Chapter 9 – Adding Images and Other Page Elements

The Tag and Its Attributes

Web Design in a Nutshell, eMatter Edition

Resizing images

If the values specified in thewidthandheightattributes are different than the

actual dimensions of the graphic, the browser will resize the graphic to match the

specified dimensions. If you specify a percentage value for width and height, the

browser will resize the image to the desired proportions.

Although this effect can certainly be used strategically, as for resizing a single pixel

graphic to hold a certain amount of space, it usually just results in a pixelated,

poor image quality, as shown in Figure 9-9. It is better to resize images in a

graphics program than to leave it up to the browser.

Using width and height to preload images

Preloading images refers to methods used for downloading images and storing

them in cache before they actually need to be displayed on the page. One trick for

preloading is to place the graphic on a page that will be accessed first (such as a

home page), but set the width and height attributes to one pixel. This will cause

the image to download with the rest of the page, but the only thing that will be

visible is a one-pixel dot (which can be tucked away in a inconspicuous place).

<IMG SRC="bigpicture.gif" WIDTH=1 HEIGHT=1>

Ideally, the image will have finished downloading quietly while the user is still

reading the first page and will pop into view instantly when the user links to the

page where the image is displayed at its full size.

Vertical Alignment

Thealignattribute is used to control how the graphic is positioned in relation to

the flow of the text.

Vertical alignment controls the placement of the graphic in relation to points in the

surrounding text (usually the baseline). The default alignment isbottom, which

aligns the bottom of the image with the baseline of the surrounding text (shown in

Figure 9-10).

Figure 9-9: Scaling an image with width and height attributes

Figure 9-10: Default (bottom) alignment of image with text

<IMG SRC="star.gif" WIDTH=50 HEIGHT=50>

<IMG SRC="star.gif" WIDTH=200 HEIGHT=50>