Adding images to a webpage

This tutorial explains how to add images to your web pages using the <img> tag in HTML code. You can specify a number of attributes for an image including the following:

  • src – specifies the location or path of the image
  • width – specifies the width of the image
  • height – specifies the height of the image
  • alt – specifies alternative text to be displayed in case the image cannot load.

The structure of an <img> tag may be set out like the one below:

Here are a few important things to note:

  • You should always use alt text in case the image cannot be loaded in the user’s browserThis is what alt text looks like when an image can’t load:
    alttextAlt text often also shows up after a few seconds when the user hovers their mouse over an image.
  • The path and filename of the image specified in the src tag in your code must be exactly the same as the actual file – make sure you include the file extension eg. photo.jpg or cartoon.gif
  • You should specify the width and height of the image so the correct space is set aside even if the image can’t be loaded. You don’t need to specify both width and height – you can just specify one and the image will resize to the same proportions.
  • You can change the width/height of an image to make it smaller. However, it is a good idea to make the image the correct size in the first place to reduce the time it takes to download the image. Image quality should be optimised to ensure high quality but minimal load times.

Watch the video below to see how to use the <img> tag in your own web page and then scroll down to see the sample code.

This sample code shows how to add an image to a webpage. Copy this code into a new HTML file. Modify the file name (in the src attribute) and the width and height attributes in the code to suit your own image file and experiment with different size images.

<!DOCTYPE html>
<html>
    <head>
        <title>My Website</title>
        <meta charset="utf-8"/>
    </head>

    <body>
        <img src="images/photo.jpg" alt="Landscape photo" width="426" height="284" />
    </body>
</html>

How to make an image a link

If you want to make an image a link so that when the user clicks on image they are taken to another page, you can just place the image tag inside the link tag (instead of text for the link). As an example, the following code would take the user to ‘page2.html’ when they click on the image which has the file name ‘your_image.png‘:

<a href="page2.html"><img src="images/button.png"/></a>

After watching the video, answer the following questions for discussion before the next lesson:

  1. Which unit of measurement is used to specify the width/height of an image in the code? How could the use of this unit affect the way images are displayed on screens of different sizes?
  2. Are there any other units of measurement that can be used?
  3. What could cause an image to fail to load in a user’s browser?
  4. Why is it important to use images with smaller file sizes?
  5. What issues need to be considered before including images on a web page?
  6. Evaluate the effectiveness of using images to convey large amounts of information on a web page.

Now create your own web page using several of your own images combined with text. You can use the sample code above to get started.

Once you are ready to move on, click here to find out how to add audio to your web pages.