01 | GIVE AN IMAGE A PURPOSE

An image can explain a circuit, show a finished project or set the mood of a page. Before adding it, decide what it contributes. A useful photograph needs different alternative text from a decorative pattern.

This lesson covers how to load an image, find the correct file path, describe it appropriately and keep it proportional on different screens.

02 | THE IMG ELEMENT

<img src="images/robot.jpg" alt="Delivery robot with a four-wheel chassis">

The img element embeds an image. src gives the image location. alt gives a text alternative. img is a void element, so it does not have a closing tag.

The image file is separate from your HTML document. The browser needs access to that file at the specified location. A filename alone does not copy the picture into your website.

03 | ORGANIZE YOUR FILES

first-website/
  index.html
  images/
    robot.jpg
  pages/
    gallery.html

From index.html, use images/robot.jpg. From pages/gallery.html, use ../images/robot.jpg. The two dots move up one folder before entering images.

Use forward slashes, exact filenames and the correct extension. On many servers Robot.jpg and robot.jpg are different files. A path such as C:/Users/Student/Desktop/robot.jpg refers to your computer and will not work for other visitors.

<img src="images/robot.jpg" alt="Our delivery robot">
<!-- From pages/gallery.html: -->
<img src="../images/robot.jpg" alt="Our delivery robot">

04 | WRITE USEFUL ALTERNATIVE TEXT

Alternative text provides the image’s meaning when a person cannot see it, including when using a screen reader. Describe what matters in the context rather than listing every visible detail.

<img src="images/robot.jpg" alt="Delivery robot carrying a small parcel on its rear platform">

“Image” or “picture of a robot” may add little. In a construction guide, mention the relevant component or arrangement. In a gallery, a concise description of the finished model may be enough.

A genuinely decorative image should have an empty alternative: alt="". Keep the attribute; omitting it is not the same as explicitly marking the image decorative.

<img src="images/decorative-divider.png" alt="">

If an image is a link, its alternative text should communicate the link’s destination or action when no other accessible link text supplies it. A complex diagram needs a longer explanation in nearby text as well as a short alternative.

05 | SIZE AND CENTRE AN IMAGE

<img
  src="images/robot.jpg"
  alt="Delivery robot carrying a parcel"
  width="800"
  height="600"
  style="display: block; width: 100%; max-width: 320px; height: auto; margin: 20px auto;"
>

The width and height attributes above describe an example image’s intrinsic 800 by 600 proportions. Use values matching your own image. They help the browser reserve space before it loads.

The small inline CSS example controls display: max-width limits the visible size, width: 100% lets it fit its container, height: auto preserves proportions, and margin: 20px auto centres this block image with vertical space.

Change 320px after reviewing the page. Do not force unrelated width and height values that stretch the image. We will study CSS properly later; for now, keep this reusable pattern.

06 | CAPTIONS AND IMAGE FORMATS

<figure>
  <img src="images/robot.jpg" alt="Delivery robot with a rear parcel platform">
  <figcaption>Our first delivery-robot prototype.</figcaption>
</figure>

figure groups self-contained content, and figcaption supplies its caption. A caption is visible to everyone; alternative text is not a replacement for a useful caption, nor should both repeat identical wording unnecessarily.

• JPEG: commonly used for photographs.
• PNG: useful for graphics and transparency.
• SVG: vector graphics that can scale cleanly, often suitable for diagrams.
• WebP: a modern format supporting efficient image encoding and transparency.

Choose a suitable format and reasonable file size. Displaying a huge image at 200px does not automatically reduce the bytes downloaded. Resize or compress the source image appropriately, and use images you have permission to publish.

07 | PRACTISE ON YOUR OWN PAGE

1. Create an images folder beside index.html.
2. Add a suitable photograph named robot.jpg, or update the code to match your own filename.
3. Paste the example below into your document body.
4. Save, open the page and check its appearance.
5. Make the browser window narrower. Check the image fits and remains proportional.

<h1>Our robot</h1>
<figure>
  <img src="images/robot.jpg" alt="Delivery robot carrying a small parcel" style="display: block; width: 100%; max-width: 320px; height: auto; margin: 20px auto;">
  <figcaption>Our first prototype.</figcaption>
</figure>

The code preview on previous lessons blocks external image files. Use your local browser and your actual image for this task.

08 | DEBUG A MISSING IMAGE

If the image does not load, compare src with the folder layout. Check capitalization, extension, spelling and which folder contains the HTML file. Confirm the image really exists and opens independently.

If the image loads but looks stretched, check the sizing rules. If the picture is meaningful but its alternative text says nothing useful, improve the description.

09 | CHECK MEANING, THEN TEST

Review your page in two ways. First, read the source: are the headings in a sensible hierarchy, are items inside li elements, and are the tags correctly nested? Then use the browser: can you scan the content, follow the steps and understand where each link leads?

A link can look correct yet point to a missing file. Test every destination. A browser can also recover from malformed markup, so a page appearing readable is not proof of correct structure.

Further reading: MDN: headings and paragraphs and MDN: creating links.