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.
To place images in your page, use the
img tag. This takes the basic form:
<img src="image-path" alt="alternative-text" />
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
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
<img src="tree.gif" alt="Tree" />
…and the browser knows to look in the same folder as the Web page for the
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
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
website/), then go into the
images/ directory, and find
tree.gif in there.”
height attributes with the
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" />
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.
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 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
.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!