<IMG>

Insert an image on the page

Element used to load an image file onto your page.

   <html>
        <head>
        <title>A Gallery of Beauty?</title>
        </head>
        <body>
           .
           .
==>>      <img src="../img/lo-025.gif" height=90 width=64 align=bottom alt="The HTML Writers Guild">
          .
           .
        </body>
        </html>

This is it - one of the most important elements of HTML - how to get the bloody pictures loaded up on your page! You can get the images from anywhere, as long as you respect copyright and other use restrictions. You could be a real jerk and just link to the image from the source's site and use their host resources to get the image. Or you can be a nice person and copy the image to your server and store it there with the rest of your page.

Or, better yet, scan in some photos of your own or get one of those cute little computer cameras and put some original stuff on the network.

But, no matter how you get the material, this is how you display it.

You do need to consider some important matters - we haven't all moved from 28800 baud modems yet despite what the barber says. Some haven't even gotten past 9600 or 14400. Images tend to be very big. Unless you've paid particular attention to pallettes and compression formats you could be placing a real burden on your viewers. Be sensitive to the size and quantity of images on one page. Of course, once they've downloaded the image it's cached and they don't have to download it again as long as it's on their disk.

The other thing to consider is how some browsers treat the display of images. A lot of the browsers will wait on the retrieval of an image to see what it's dimensions are before they'll display anything else. Find out the dimensions of your image - through a paint program or the display of the image by itself through a browser - and put those in the img element.

Always include alt text! A few purists might be running with images turned off and your text is all they see. Other programs that are converting the pages to text or audio need the text as well.

With all of that being said, here are the rules.

HTML 3.2 Final

src: Required, after all, what good's an img tag if you don't tell it what to display. We're looking for a URL that points at a file that ends in gif, jpg, jpeg, or png. You may have some add-ins that will service other types of files.
alt: This is used to provide a text description of the image. Very useful if your page is being handled by a non-graphical browser.
align: This is how you tell the browser to position your image relative the current text line that is being displayed. If you specify top the browser is supposed to align the top of the image with the top of the current text line. If you specify middle the browser is supposed to align the middle of the image with the baseline of the current text line. If you put bottom the browser is supposed to align the bottom of the image with the baseline of the current text line (this is the default). If you put left the image is supposed to move to the left margin of the page and any additional text should flow to the right of the image. If you put right the image is supposed to move to the right margin of the page and any additional text appears to the left of the image. Each browser may have it's own interpretation of the exact placement of images and text so you'll just have to experiment to find out what works best.
width height: I strongly recommend that you always specify these two values (in pixels) for your image. If you don't, then the browser will halt displaying your text until it's finished downloading the image and knows how much space to reserve for it. Be careful in specifying these numbers. If you get confused and reverse them, the browsers will generally resize your image to fit the dimensions you've given. This can result in some odd looking images. Of course, I've never done this in my life!
border: When you're using the image as part of a link to another page or image the browser will outline the image (just like it underlines text that represents a link). You can specify how thick you want the border, in pixels, or hide the border by setting the width to 0. The color will depend on any link colors you may have set in the body statement or the defaults for the particular browser that is displaying your page.
hspace: Use this attribute to give yourself some breating room on the sides of your image. If you don't, you can have other images or text almost touching it. If this is what you want then I guess you could set this value to 0. The value applies to both right and left, you can't have one side be 5 pixels and the other side be 2 pixels.
vspace: This is like the hspace attribute.
usemap: This is used when you want to have a "client" side image map. That's where all the map work is done on the viewer's computer. Somewhere else on your page you would have a map element that contains the definition of all the map coordinates and the appropriate action to take if a particular area of the image is selected. You would specify a unique name that is also given in the map element.
ismap: Use this attribute when you are doing "server" side mapping. You'll see this in your code for LinkExchange if you've ever used them to put banners on your page. Whenever a user clicks on their image, the browser bundles up the coordinates and sends them over to their server. Then they do the work to decide what you see next.

Netscape

Nothing special.

Microsoft Internet Explorer

Nothing special.

Internationalization

Nothing special.

The Rusk Family . . . "the Legend Continues"

Michael T. Rusk
Comments to author: mrusk@radix.net