Adding images to a web page

Web Design with HTML & CSS

🕑 This lesson will take about 10 minutes

In this lesson, you will learn how to add images to your web pages using the <img> tag in HTML code. You can specify a range 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:

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.

Here are a few important things to note:

  • You should always use alt text where possible. It makes your make website more accessible - screen reader software can read out the description of an image to a user with visual impairment. Also, alternative text in case the image cannot be loaded in the user’s browser

  • 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.

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‘:

After watching the video, attempt the following questions before the next lesson:

  1. Which units of measurement are used to specify the width/height of an image in the code? How could the use of different units affect the way images are displayed on screens of different sizes?

  2. What could cause an image to fail to load in a user’s browser?

  3. Why is it important to use images with smaller file sizes?

  4. What issues need to be considered before including images on a web page?

  5. 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.

Next lesson: Adding audio to a web page