The <img> tag is used for inserting graphics (images) into your document. It is a relatively simple tag but interacts with other tags in complex ways, so it gets a page all to itself.

Writing the Tag

The basic format of <img> is this:

<img src=imagefile align=alignment alt="alternate-text" border=pixels width=pixels height=pixels>

The <img> tag is a "standalone" tag in the sense that it can be used almost anywhere in the document body, and in the fact that it has no closing tag (there is no such tag as </img>).

Let's look in detail at the attributes that can be specified along with the <img> tag:

src specifies what image you would like to display. The imagefile is either a relative or absolute URL pointing to the desired graphic. In almost every situation you will want to use a relative URL here! The only exception is for images that are linked from another site such as banner ads, which you probably won't be using. This attribute is required, since without it you have no image to display.

align specifies how your image will be placed on the page. If alignment is "left" or "right" it will be placed as near as possible to the appropriate edge of the page, and text will (if possible) be wrapped along the opposite side of the graphic. Regardless of the shape of the visible portion of the graphic, it will occupy a rectangular space on the page and the text wrapping will behave accordingly. If the alignment is "center" then the image will be positioned in the center (horizontally) of the page and the text will not wrap around it at all, but rather will resume below the graphic.

alt is a very important attribute that is, unfortunately, often overlooked. The alternate-text can be any (short) phrase that will display in place of the graphic on systems that do not have graphics capability. This text also displays as the graphic is being loaded on most graphical browsers, and it is used as a "fallback" in case the Internet link to the image itself fails and the image cannot be downloaded (or if the user gets tired of waiting and aborts the download). Remember also that some users who have graphics may be in a hurry and will turn it off in the browser -- here again, the alt attribute supplies the text that will be displayed. You can see how important it is to put something meaningful here! The alternate-text can contain multiple words with spaces between, but it should be put in double-quotes as shown above.

border specifies how many pixels "thick" the border around the image will be. Most browsers display no border unless the image itself is part of a hyperlink, but that is not a given. If you are using the image as a hyperlink, the image itself may contain visual cues that it is a link and so you may not want a colored border around it as an added distraction. In that case, use border=0 to suppress the border altogether.

width and height are integers that indicate the size of the image. The browser will allocate a rectangle of this size on the screen, then scale the image (if needed) to fit. These two attributes are provided so that the browser can intelligently lay out the page with empty spaces before downloading the graphics. That way, the user can begin reading the text even as the pictures are loading, and the page won't jump around as the browser recalculates the layout after downloading images.

Unfortunately, many web designers mistakenly use width and height to try to scale an image to make "thumbnails" in a photo album. Let's say you have an image file that is 400 pixels wide by 320 pixels high. You would like to thumbnail it at 100 pixels by 80 pixels -- a perfectly reasonable choice. The correct way is to actually have a smaller copy of the image on the server, created using a graphics editor program, that is downloaded as the thumbnail. Make the thumbnail part of a hyperlink to the actual image, so that the user can click on the thumbnail to see the entire image. Since your album may have dozens of photos on one page, this will dramatically reduce the download time of the page, and allows the user to select only the photos of particular interest for viewing at the larger (and slower) size.

The incorrect way to use width and height is to have only the large image file, but to have the thumbnail <img> tag (which is still part of a link to the full image) specify width=100 height=80. The fact is that the entire large image still has to be downloaded -- for all the images on the page even if the user never selects the links to the larger version. The scaling down is done in the browser, after downloading. The page may work fast when you test it on your hard disk, but it will be slow as molasses over a modem!

Using Images as Headings

A common design technique is to have a colorful, fancy icon or logo at the top of a web page, often in place of the level-one heading that gives the page title. This is a good technique, but what do you do if the user's browser cannot draw the graphic? The answer is easy -- put the graphic inside an <h1> tag set! Here is an example:

<html>
<head>
<title>XYZ Company Home Page</title>
</head>
<body bgcolor=white text=black link=blue vlink=purple alink=red>
<h1 align=center><img src="images/logo.gif" border=0 align=center
alt="XYZ Company Incorporated" width=500 height=200></h1>
<p>
blah...blah...blah...
</p>
</body>
</html>

Look carefully at what's inside the <h1>....</h1> area. There is no heading text except for what's in the alt attribute of the <img> tag itself. The way this works is that on a graphical browser (the usual case) the <h1> tag causes some extra whitespace to be generated (a good thing, because it leaves a clear space around the logo) but has no other effect because there is no text inside the tag. But on a browser that cannot display the graphic, the alt text prevails, and now it becomes the text inside the <h1> heading -- which behaves as usual. So every browser will now have "XYZ Company Incorporated" displayed in some way, either as the fancy logo or as plain but well-emphasized text.

This same technique works in side the <a> ("anchor") tag, which is covered next, to make an image part of a hyperlink.