Tutorial: Using images

Level: Beginner. Published on 1 January 1998 in HTML

Having trouble adding graphics to your Web page? Haunted by red crosses instead of pretty pictures? This is the tutorial for you!

This tutorial is designed to show you how to include images in your web page using HTML. It's aimed more at the beginner than the expert, and shows some common pitfalls encountered when using images in web pages.

The img tag

To place images in your page, use the img tag. This takes the basic form:

<img src="image-path">

where image-path is the directory (folder) and file name of your image.

Knowing what to put for image-path is one of the first hurdles for the beginner. Let's look at a few examples to help explain paths and folders.

Say your web page is called mypage.html and your image is called tree.gif. On your web server or hard drive, you have a website directory called website/.

Example 1: Image and page in the same directory

The easiest example to understand is when your page and image are in the same folder, or directory - for example:

website/
    mypage.html
    tree.gif

Then, to include the image in your web page, you just specify the filename "tree.gif":

<img src="tree.gif">

...and the browser knows to look in the same folder as the web page for tree.gif.

Example 2: Image in a subdirectory

A more common scenario is having the image in a folder below the one containing the Web page. This allows you to group all your images in a single folder (often called images) to make them easier to manage:

website/
    mypage.html
    images/
        tree.gif

This time, the HTML to include the image in your Web page looks like this:

<img src="images/tree.gif">

In other words, this time we have to tell the browser to look for tree.gif in the subdirectory called images.

Example 3. Image in a completely different directory

What if your image file is in a completely different directory containing your web page? Often this is done so that there is one shared images directory at the top of the site, which all pages in subdirectories can use. For example:

website/
    mystuff/
        mypage.html
    images/
        tree.gif

In this case, the HTML would look like this:

<img src="../images/tree.gif">

How does this work? Well, the ".." tells the browser to go up a directory. So the browser sees this HTML as: "Go up a directory (from mystuff/ to website/), then go into the images/ directory, and find tree.gif in there."

Using width and height attributes

It's a good idea to specify the image width and height as part of the img tag. This helps to maintain the correct layout of your page while the images are loading, or if the user has disabled the loading of images in their browser.

To specify the width and height, use the following HTML:

<img src="imagepath" width="x" height="y">

where x is the width of the image in pixels, and y is the height of the image in pixels.

But how do you find the width and height of the image? Well, with most browsers you can open the image in a browser window and it will tell you the width and height in the title bar at the top of the window. In Internet Explorer you can right-click on the image and select Properties. You should see the width and height next to "Dimensions" in the resulting dialog.

In Photoshop, you can Alt+click in the status bar to find out the dimensions of the current image (see the Photoshop tutorial Viewing image information). Also, most paint packages come with an option to change the size of the image (usually called something like "Image Size" or "Resize Image"). These bring up a dialog box which will show you the current image width and size. If this doesn't work, consult your paint package manual or technical support.

Across the border

If you use your image as a link or a button, you may find that you get a coloured rectangle around the image. This is the image border and is used to indicate that the image is a link. However, it's also incredibly ugly. Make sure you turn it off by specifying the following in your img tag:

<img src="imagepath" width="x" height="y" style="border: none;">

This will ensure that the border does not appear around the image.

Common mistakes

1. Getting the path wrong

If you see an "image not found" symbol (a red cross or a broken picture symbol) on your Web page where you should see an image, the chances are you've specified the wrong path to the image. Look at the three examples above and see if you can work out where the problem might be. Don't forget to include the image file extension (whether .gif or .jpg) when specifying the path.

2. Not uploading the image

It's amazing how often even seasoned webmasters get caught out with this one! Make sure you've uploaded your image to your Web server, and that it's uploaded to the right directory...

3. Using the wrong case

Don't forget that most Web servers are case-sensitive, so if you specify img src="tree.jpg" and the file you uploaded is called "tree.JPG", the server won't find it...

The end

That's the end of this article. We hope you found it useful. If you're still stuck and would like further help, check out our online Help Forums, where you can get assistance from members of Elated and other webmasters.

Also, don't forget the free ELATED Extra Newsletter, where you can get more great Web-building articles and tips sent straight to your inbox!

If you would like to offer us feedback on this or any of our articles, please contact us. Have fun!

Top of Page