Add Images

Introduction

Images can make a website more interesting, informative, and easier to understand. In this lesson, you will add an image to a webpage for a small travel website. You will learn how to tell the browser which image to display, how large it should appear, and what text to show if the image cannot be seen.

Images are added with an <img> element. Unlike headings and paragraphs, an image element does not wrap around other content, so it does not need a closing tag.

Think of an image element as an instruction: “Display this image here, and use this description if the image is not available.”

How the Image Element Works

A basic image element looks like this:

<img src="images/mountain.jpg" alt="Snow-covered mountain beside a blue lake">

The element has important attributes:

• src means source. It tells the browser where to find the image file.
• alt means alternative text. It describes the image for people using screen readers and for situations where the image cannot load.
• width sets the displayed width, usually in pixels.
• height sets the displayed height, usually in pixels.

The src value is a path. If your image is inside a folder named images, and the file is named mountain.jpg, use images/mountain.jpg. File names and folder names must match exactly. On some computers, uppercase and lowercase letters are treated as different characters.

Use meaningful alternative text. For example, alt="Mountain" gives little information, while alt="Snow-covered mountain beside a blue lake" explains what matters in the image. Do not begin with “Image of,” because screen readers already identify the element as an image.

Worked Example

Imagine this project folder:

travel-site/
  index.html
  images/
    coast.jpg

The following code adds the image to index.html:

<h1>Weekend by the Coast</h1>
<p>Explore a peaceful shoreline close to home.</p>
<img src="images/coast.jpg" width="600" height="400" alt="Rocky coastline beside calm blue water">

The browser looks in the images folder, finds coast.jpg, and displays it at 600 pixels wide and 400 pixels high. The alternative text communicates the image’s purpose if it does not load or if a visitor uses assistive technology.

When setting both dimensions, try to preserve the image’s original shape. If the proportions are changed too much, the image may look stretched or squashed.

Guided Activity: Add a Destination Image

1. Create a folder named images inside your website project folder.
2. Place an image file in that folder. Use a simple file name such as park.jpg or city.png. Avoid spaces and unusual symbols in file names.
3. Open the HTML page you created in the previous lesson.
4. Below your introductory paragraph, add an image element. Start with this pattern:

<img src="images/park.jpg" width="600" height="400" alt="...">

1. Replace the source path with the exact folder and file name you used.
2. Replace the dots in alt with a short, useful description of the image.
3. Save the HTML file and open or refresh it in your browser.
4. Check the result. Is the correct image displayed? Does it have a sensible size? Does the alternative text describe the important content?

Ask a partner to read your alternative text without seeing the image. Can they form a reasonable picture of what the image shows?

Common Mistake: A Broken Image

If you see a broken-image symbol, the browser probably cannot find the file. Check each part of the path carefully. Confirm that the image is inside the expected folder, that the extension is correct, and that capitalization matches. For example, images/Park.jpg is not always the same as images/park.jpg.

Also check whether you accidentally wrote a path from a different location. If index.html and the images folder are next to each other, use images/park.jpg. Do not add an extra folder name unless it really exists.

Short Independent Challenge

Add a second image to your page that supports its topic. For a food page, you might add a dish; for a hobby page, you might add equipment; for a travel page, you might add a landmark.

Your second image must:

• Be stored in the project’s images folder.
• Use a correct relative src path.
• Include both width and height.
• Include alternative text that explains the image clearly.

Finally, temporarily change one character in the source path and refresh the page. Observe the broken image. Restore the correct path, then explain why the browser could not find the file.

Check Your Understanding

• Which attribute tells the browser where the image file is located?
• Why is alternative text important?
• What can happen if width and height do not match the image’s proportions?
• Why must the spelling and capitalization in a path match the actual file?

Well done. You have added visual content while also making your page more accessible and reliable.