When HTML was first written computer networks, especially modems and phone lines, simply weren't fast enough to handle most images. Since then advances in CPU and modem speeds, plus some fancy tricks with compression technology have turned them into a staple on webpages. The basic image tag is simple: <IMG>. It's the attributes that get complicated.

SRC:

SRC="imagepath.xxx" is how you specify where the image can be found.

LOWSRC:

LOWSRC="filename.xxx" is kind of a cool trick. You can specify a low-resolution image that will be loaded and displayed before the image that is specified in SRC. The main image won't display until it's fully loaded. This can also be an underhanded way to do a simple animation. (Netscape only)

HEIGHT & WIDTH:

These are expressed in pixels, and can be omitted, but including them makes the page load faster.

VSPACE & HSPACE:

These define the Vertical and Horizontal space to be left between the image and any adjoining text or other images. Expressed in pixels, and only works in Netscape.

ALT:

ALT="Whatever you want in here" can also be omitted, but including one is good coding, as this is what browsers that are text-only or built for the visually impaired will display instead of the image.

BORDER:

Also expressed in pixels, this draws a border around the image. If you have made the image a hyperlink and do *not* want a colored border around it, you must specify BORDER="0".

NAME:

NAME="Whatever" isn't necessary, but it comes in handy when you get into JavaScript or imagemaps.

USEMAP:

USEMAP="MapName" tells the browser that it's a client-side imagemap, which we'll go into later.

ISMAP:

ISMAP="MapName" tells the browser it's a server-side imagemap, which we'll also go into later.

ALIGN:

ALIGN can take a bunch of different values, and tells the browser how to align any text that may be on the same line as the graphic.

TOP

Aligns the top of the image with the text

MIDDLE

Aligns the middle of the image with the text

BOTTOM

Aligns the bottom of the image with the text

LEFT

Aligns the image along the left margin and allows the text to flow beside it (Netscape only)

RIGHT

Aligns the image along the right margin and allows the text to flow beside it (Netscape only)

TEXTTOP

Aligns the top of the image with the top of the tallest character in the line (Netscape only)

ABSMIDDLE

Aligns the middle of the image with the middle of the text (Netscape only)

BASELINE

Aligns the bottom of the image with the baseline of the text (Netscape only)

ABSBOTTOM

Aligns the bottom of the image with the bottom of the text(Netscape only)

These attributes can be listed in any order, and the only one that's truly necessary is the SRC.

There's a neat little trick you can do with the HEIGHT and WIDTH attributes. No matter what the actual dimensions of the image are, the browser will display the image according to the HEIGHT and WIDTH values you have given it. So if you have a logo that that you are going to use a lot, and you want to display it in different places at different sizes, you don't have to actually create a bunch of differently sized images, you can just create one image for the largest instance and change the values in the HEIGHT and WIDTH attributes. This way, once the image is in the browser's cache, it can be accessed much faster than downloading a whole new image each time. This works best when reducing an image, though you should check to make sure no distortion is creeping in.

The image at its original size

And the same image reduced...