Everybody loves to add pictures to their work. And with good reason, too. Images can make your web page much more dynamic, and can catch a reader's attention so that they'll stay for the rest. But, there are a couple of important image-related issues you should know about before you start rackin' up them photos of your cat.

First, you have to know that there are only a few types of images that can work on web pages [and a good thing too - I would really hate waiting for a bitmap to download]. HTML [and your friendly neighbourhood browser] only supports two kinds of image files at the moment, GIF files, and JPG files [pronounced jif and jay-peg respectively]. The JPG format is best for photographs, because it can display millions of colours, but the GIF format is best for artwork, as it only displays 256 colours at any given time [some programs let you set what's called the "colour index" for the file, and that means that you can decide which 256 colours the image can display].

Another, and probably more important issue to be aware of, is file size. When your browser displays a page, it first has to download that page from the server. It also has to download all the pictures and stuff that you have on the page. When all is said and done, your page might be 20K. That's alright. But if you have 6 JPG files on your page at 800K each, that's getting kind of big. Your average 56K per second connection actually only gives you 1K or 2K per second. That means that an 800K image will take 400 seconds to download, plus the page itself, plus the other 5 images at 800K each. Most of your audience will either be asleep, dead from boredom, or long-gone to somebody else's site once the page finally renders. The pictures don't have to be small in terms of pixel size, but getting the file size down is a must. I should also mention that GIF files usually wind up being smaller than JPG files.

Now that you know a little bit about images, it's time to learn how to include those bad boys in your page. For that, you need the IMG tag, which has the necessary attribute of SRC. The IMG refers to "image", and the SRC bit refers to "source". See, not that tricky at all. Oh, you also have to know where you stored your picture. If I were to link to a picture, for example, of me, then I would put the following tag in to create the image:

<IMG SRC="http://www.vestige.org/frames/info/gus.jpg">

IMG tags also have a few other interesting properties, like the ALT attribute. It lets you include a text description of the image in case it should render improperly, or in case someone should have vision problems or be using a browser that doesn't support images [yes, they do exist]. If you know what kind of platform your viewers are going to be using, however, it also lets you get a little tongue-in-cheek. You could use the ALT attribute to make a humourous reference for the picture instead of serious description.

There are a couple of other handy attributes. For example, if you know the dimensions of the image you are using, you can include them in the tag and your image will load faster, and the page will re-arrange itself faster to incorporate the image. However guessing if you don't know the actual size of the image can lead to some really ugly looking pictures. The attributes necessary for that are the HEGHT and WIDTH attributes.

Lastly, there is the BORDER attribute, which allows you to set a border around the picture. This can be a cheap way to put a frame around your picture, but, as we'll see when we get to links, it can also be a huge pain. So, if we were to set the border, and all the other attributes on the tag, it would look like this:

<IMG SRC="http://www.vestige.org/frames/info/gus.jpg" ALT="A cool picture of me." HEIGHT="200" WIDTH="120" BORDER="2">

Before we move on, I just want to let you know that the ALT attribute doesn't work on a lot of Macs, so you also have to include a TITLE attribute, which works the same way. And if you find that you are having trouble putting your images exactly where you want them, you can set the amount of white space around them [in pixels], whith the VSPACE [for the vertical space] and HSPACE attributes. I hardly ever see this in action, however, because it doesn't allow you to put anything in that white space.

You can also add backround images to your web page [this works for tables too, so keep it in mind later on]. In the BODY tag, you can set the BACKGROUND attribute. The value of the BACKGROUND attribute should be the url of the images. Easy as pie.

Now we're going to move on to one of the coolest features of HTML, the hyper-links [and nobody calls them that anymore - they just call them "links"].