If a visitor has a choice between two sites that provide the same content, they will usually opt for the one that is more visually stimulating. If you want to have an attractive web-site, you cannot go around graphics. Of corse, there is also the issue of loading speed for people with slower modems, so never overdo it.

First of all, you should know that there are more than one graphic formats. Therefore, you can have images ending with GIF or JPG, and lately PNG. Those three formats are the most popular that are supported by today's browsers.

The most basic tag for calling up an image is <IMG SRC="image.gif">. There is something wrong with this, though. If you do not add HEIGHT and WIDTH attributes, the browser won't know the correct size of the image until it's finished loading, therefore causing the whole page to load slower. Also, you might want to add a text message when the cursor rests on the image, to let the visitor know what the image is from. Or you might want to add a border. Look below for some of the numerous IMG attributes.

Image Tag
<IMG SRC="imagename.gif">
DESCRIPTION: This is the most basic tag for calling up an image, but it is highly recommended and appreciated by your visitors if you use a combination of the attributes displayed below.
<IMG SRC="imagename.gif" ALIGN=RIGHT>
DESCRIPTION: This attribute does exactly what it says, it moves the image to the right of the page. Other possible alignment options are LEFT, RIGHT, TOP, BOTTOM, MIDDLE.
<IMG SRC="imagename.gif" ALT="Hello World!">
DESCRIPTION: This attribute displays the text specified when the mouse cursor moves over the image. If you want to see this attribute in action, rest your mouse for a few seconds over the image above.
<IMG SRC="imagename.gif" WIDTH=69 height=40>
DESCRIPTION: This attribute specifies the width and the height of the image. It is also possible to use it to resize the image in the browser (like in the example above), although this is not recommended as the result will usually be pixelated and unclear. You should use this attribute for EVERY IMAGE to increase the loading speed of your web-site.
<IMG SRC="imagename.gif" BORDER=2>
DESCRIPTION: This attribute adds a border of a specified thickness around the image.
<IMG SRC="imagename.gif" HSPACE=5 VSPACE=5>
DESCRIPTION: This attribute adds an invisible border around the image. HSPACE specifies the horizontal thickness, VSPACE specifies the vertical thickness.

TIP: You should combine the majority of these tag extensions to make your site seem to load faster and to display the image right on every browser. Here is the image display configuration that I always use for my graphics : <IMG SRC="IMAGENAME.GIF" BORDER=0 HSPACE=0 VSPACE=0 ALT="TEXT" WIDTH=# HEIGHT=#>

And here's the reason why: Some browsers tend to automatically add a border if you use an image as a link, so if you do not wish that to happen, you should always add the BORDER=0 attribute.

HSPACE=0 and VSPACE=0 are very useful when you use your images with tables, since tables are relatively unstable (especially in Netscape Communicator) and tend to leave spaces between images. The H/VSPACE attribute ensures this does not happen.

The ALT="TEXT" attribute makes sure that if the image doesn't load for some reason (i.e. broken link, or download stops) the visitor still knows what it is and if it's a link, where it goes to.

The WIDTH and HEIGHT attributes are probably the most important ones and few people actually use them. If you specify the image HEIGHT and WIDTH via these attributes, your page will load faster since browsers only find out the HEIGHT and WIDTH of an image after the image is completely loaded.