Images can make or break a website depending how they're used. Below gives you a basic idea of the right and wrong way

Step 6 - Showing Images

Okay. The first thing to discuss in this section is formatting. The general rule is that a photo should be saved as a JPEG file and an image, such as a logo or button should be saved as a GIF file. I won't go into the details of what each of these are, all you need to know that it's to do with how the images are compressed. And remember the smaller the image size, the quicker the page will load.

If you have a massive image that you want to put up, try cutting it into several smaller pieces then inserting them individually into your web page, that will help loading times. There's nothing people hate more than a slow loading site all because of one large image.

Okay, so as I don't know what graphics program you're using I won't go into saving images in programs, you'll be able to find that out from the Help Files on the program itself. Right, Take the image at the top of this page. Strangely it's called "internet" and as it's a graphic rather than a photo it's been saved into GIF format. Before I tell you how to insert an image into a page, a word on file structure. You don't have to, but it makes sense to store all images in a folder called images. In my case I have all images stored in the images folder but because I'm a neat freak the page titles are stored in a subfolder called "titles". Right, here's how I inserted the above image into my page.

<img src="images/titles/internet.gif" border="0">

Simple eh? It's worthwhile noting though that if you have a page in a folder you need to go up out of that folder and down back into the images folder, let me explain:

So, if you wanted to show the "My Links Image" on the homepage you would reference the file like so:

<img src="images/mylinksimage.gif" border="0">

But if you wanted to reference the same image from the "My Links Page" you will have to go Up out of the "Links folder" and back down into the "Images Folder" therefore the reference would become:

<img src="../images/mylinksimage.gif" border="0">

The .. just tells the browser to go up one folder level, therefore if you wanted the browser to go up two levels the link would be

<img src="../../images/mylinksimage.gif" border="0">

and so on. Have a go at moving files around and linking from different "depths". It's also common courtesy to put an alt tag on the image so that if a person has their graphics turned off (Yes! It can happen) they can get a rough idea of what the image is supposed to be:

<img src="../images/mylinksimage.gif" alt="My links page title image" border="0">

Earlier, I mentioned that if you have a large image you should cut it up into smaller images and join them together in that page, but how do you make sure it comes out right? Easy, Step 7 - Using tables