HTML Images

This tutorial shows you how to include images in your HTML Web pages. It’s aimed more at the beginner than the expert, and shows some common pitfalls encountered when using HTML images.

The HTML img tag

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

<img src="image-path" alt="alternative-text" />

where image-path is the directory (folder) and file name of your image, and alternative-text is text that should be shown if the image can’t be displayed for some reason.

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 Web 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" alt="Tree" />

…and the browser knows to look in the same folder as the Web page for the tree.gif graphic.

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 Web graphics 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" alt="Tree" />

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 from your HTML 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 to include the image would look like this:

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

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 with the img tag

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="image-path" width="x" height="y" alt="alternative-text" />

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 (Windows) or Option-click (Mac) 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.

Image borders

If you use your image as an HTML 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. You can turn it off by specifying the following in your HTML img tag:

<img src="image-path" width="x" height="y" alt="alternative-text" style="border: none;">

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

Common mistakes when using HTML images

1. Getting the image 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 (such as .png or .jpg) when specifying the path.

2. Not uploading the image

It’s amazing how often even seasoned Web coders 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 for the image filename

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…

Now you know how to work with images in HTML!