If you are not clear about image formats for the Web, or how to optimize your images, read this article on crunching graphics.

Once you understand how to create and optimize graphics for the Web, you are ready to add them to your website.

The <IMG> Tag

Adding an image to your page is relatively easy. First you tell the browser there will be an image. You then explain where the image is located. Finally, attributes such as alignment and borders can be assigned.

The basic tag looks like this:

The img explains that this tag will call up an image. SRC defines the source -- or location -- of the image. The location is placed between quotes and should include the exact path of the image. For example, if the file you are working on is located in the main (or root) directory, and the image you want is in a folder called images, the SRC would equal "images/filename.gif."

Tip: The organization of your website is important. Create separate folders for each section as well as one for your graphics.

Let's say you have a site devoted to TechTV. Each show would have its own folder and you would most likely have an images folder as well.

Picture the letter Y. The bottom of the Y is the root directory and each arm represents a folder. One arm is the Call for Help folder and the other is the image folder. In order to reference an image from the Call for Help arm, you have to come down to the stem of the Y before you can reach the other arm. Likewise, you need to come out of the folder you are in to go into the folder you want.

The html code must reflect this. In order to reference that folder, you precede the folder and file name you are looking for with a ../. Each layer of folders can be accessed with an additional ../, so if you have to go up two directories, your code would look like this:

An alternate method to reference this image would be to include the entire URL:

<IMG> Alignment

Alignment

The IMG tag can be aligned left, right, center, bottom, top, middle. This refers to the image in relation to other things on the page. If you only have an image and you set it to align=right, the image will appear on the right side of the page. If you place this tag in front of a paragraph, the image will appear to the right of the paragraph.

You can place the align attribute before or after the file name. Just be sure to separate it with a space:

Other Align Attributes

Use any of these attributes after align=. The envelope graphic demonstrates the attribute in action.

absbottom -- Puts the bottom of the image with the bottom of the current line.

absmiddle -- Puts the middle of the image next to the current line.

baseline -- Puts the bootom of the image with the baseline of the current line.

bottom -- Puts the bottom of the image with the text baseline. This is the default alignment.

center -- Should center the image horizontally but most browsers treat it the same as 'middle.'

left -- One of the more popular which puts the image on the left and wraps the text around it, like in a magazine.

middle -- Puts the middle of the image with the text baseline.

right -- Puts the image on the right side and wraps the text around it.

texttop -- Only works in Navigator. Puts the top of the image witht he ascenders of the text line.

top -- Puts the top of the image with the top of the tallest object on that line.

Alternate Text, Size, and Borders

Use the ALT attribute

Whenever you add a graphic to your site, don't forget to include the ALT tag to describe your image. Not everyone will be able to see your images.

Some people browse the Internet with images turned off and some have text-only browsers. Some disabled people rely on software that can read the contents of a page to them. This software cannot read an image and the image titles are often not intuitive enough.

The ALT tag comes to the rescue. ALT="description of image" will not only display the text in the place where the image loads, but will display the text when the mouse hovers over the image. This way, even though the image is not seen, a description is. If you move your mouse over the TechTV graphic above, you'll see how this works. You might need to wait a few seconds to see the text.

Border Attribute

You can also add a border to your image. Just as you add the align attribute, you would add BORDER=# (0-99) within the image tag. This places a black border of that width around your image. When an image is linked, it will have a border by default. To override this, add BORDER=0 to the IMG tag.

Image size

Add size attributes to your image to alert the browser to the layout of your page. Size is determined by HEIGHT and WIDTH, which are set to equal the pixel dimensions of your image:

<IMG SRC="filename.gif" WIDTH=50 HEIGHT=100>

Tip: You can tweak an image's size by changing the WIDTH and HEIGHT values. For example, if you create a red square that is only one pixel by one pixel, the file size will be small, but you can make the image as large as you want. Set the square's size to HEIGHT=1 and WIDTH=400. Voila-- an instant line.

Other <IMG> Attributes

The following attributes aren't used as commonly.

hspace=number
Refines the align attribute by dictating how pixels to leave clear to the left and the right of an image.

ismap
This tells the browser that ime image is being used as an image map. We'll get intop that later. Suffice to say that the image map is an image the has different links embedded within it.

longdesc=url
A link to a long description of the image. USeful for nonvisual browsers.

lowsrc=url
Specifies a smaller image that can load first. Useful if you want to speed the comprehnsion of pages with large images. The lowsrc will load first giving the viewer an idea of what the full image will look like.

usemap=url
Specifies the map information for an image map. Lets the browser know which parts of the image link to where.