Images: src, alt text, width and height

Images carry much of the content and personality of a page. A good img element does three things: it loads the right file, it describes the image for people who cannot see it, and it reserves space so the page does not jump while it loads.

The img element

<img src="images/sourdough.jpg" alt="A round sourdough loaf with a dark, crackled crust" width="800" height="600">

img is a void element, so it has no closing tag.

Alt text

The alt attribute is the text alternative for the image. It is used when:

• a screen reader reaches the image and reads the alt text aloud,
• the image fails to load or images are switched off, and the browser shows the alt text instead,
• search engines work out what the image shows.

Informative images

If the image conveys information, describe that information in a short phrase or sentence:

<img src="opening-hours.png" alt="Open Monday to Saturday, 7am to 4pm. Closed Sundays." width="600" height="200">

Ask yourself: if I replaced this image with text, what would I write? That is your alt text. Some tips:

• Keep it concise. Usually one sentence is enough.
• Do not start with "Image of" or "Picture of". Screen readers already announce that it is an image.
• Describe what matters in context. The same photo of a loaf might be "Seeded rye loaf, sliced" on a menu and "Our head baker shaping dough" on the about page if the baker is the point.
• Include any important text that appears in the image.

Decorative images

If an image is purely decorative and adds nothing for someone who cannot see it, use an empty alt attribute:

<img src="flourish.svg" alt="" width="200" height="20">

alt="" tells screen readers to skip the image. This is different from leaving alt out entirely. Without alt, many screen readers read the file name instead, such as "flourish dot svg" or worse, "IMG underscore 4021 dot JPG".

Images inside links

When an image is the only content of a link, its alt text becomes the link text. Describe the destination, not the picture:

<a href="/">
  <img src="logo.svg" alt="Riverside Bakery home" width="160" height="48">
</a>

Width and height prevent layout shift

When a browser parses an img without dimensions, it does not know how much space the image needs until the file starts downloading. It lays out the page with no space for it, then pushes everything down when the image arrives. Visitors lose their place or tap the wrong button. This is layout shift, and it is measured by the Core Web Vitals metric Cumulative Layout Shift (CLS).

Setting width and height fixes it. Browsers use the two values to calculate the image's aspect ratio and reserve the right amount of space before the image loads.

Set them to the image file's real pixel dimensions, then let CSS make the image flexible:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Our loaves</title>
  <style>
    img {
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <h1>Our loaves</h1>
  <img src="sourdough.jpg" alt="A round sourdough loaf with a dark, crackled crust" width="1200" height="900">
  <p>Baked fresh every morning.</p>
</body>
</html>

max-width: 100% stops the image overflowing its container. height: auto keeps the proportions when the width shrinks. The browser still reserves space using the 1200 by 900 ratio, so there is no shift.

Captions with figure and figcaption

When an image needs a visible caption, wrap both in figure:

<figure>
  <img src="crumb.jpg" alt="Cross-section of a sourdough loaf showing large, irregular holes" width="800" height="600">
  <figcaption>An open crumb comes from high hydration and a long, cool prove.</figcaption>
</figure>

The caption is visible to everyone and associated with the figure. Alt text and caption do different jobs: the alt text replaces the image, while the caption adds to it. Avoid repeating the same words in both.

figure is not only for images. It can hold a code sample, a chart, a quotation or a table that is referenced from the main text.

File paths and broken images

If an image does not appear:

1. Open DevTools, go to the Network panel and refresh. A red 404 means the path is wrong.
2. Check the case. Loaf.jpg and loaf.jpg are different files on most web servers, even if your computer treats them as the same.
3. Check the folder. Relative paths start from the current page, not from the site root.

A note on responsive images

A single src sends the same file to every device. On a large site, you will often want smaller files for small screens and modern formats where supported. HTML handles this with srcset, sizes and the picture element. Lesson 15 covers formats and loading, and the Responsive Web Design course teaches srcset and picture in depth.

Common mistakes

Summary

• Every img needs src and alt.
• Describe informative images by their content and purpose; use alt="" for decorative ones.
• Set width and height to the file's real dimensions, and use max-width: 100% and height: auto in CSS.
• Use figure and figcaption for visible captions.
• Check the Network panel when an image does not load.