Responsive Web Foundations / M2

Make images useful

What you will learn

• Choose alternative text based on an image’s purpose.
• Load a local image and preserve its proportions.

An image needs a source. In <img src="avatar.svg" alt="...">, the src is a path to an image file. Keep the supplied avatar.svg next to index.html for these examples. A filename is case-sensitive on many web servers even if a local computer tolerates different capitalisation. The img element has no closing tag.

Alternative text communicates an image's relevant meaning when the image cannot be seen. For a profile illustration, “Illustrated profile avatar” identifies what is present. If an image adds information that the surrounding text does not contain, explain that information. Writing “image” or copying a filename does not explain much.

A purely decorative image should have alt="" so it does not add unnecessary speech. Empty alt is a deliberate decision; omitting the attribute is different. When a photograph shows a particular person, use an accurate description of that photograph. Do not describe our generic avatar as a real person's portrait.

Width and height attributes tell the browser the image's intrinsic proportions and help reserve space. They are numbers in CSS pixels, without a px suffix. Keep the supplied file's 160 by 160 proportions. Later we will use CSS to shrink large images to fit a container without stretching them.

Use figure and figcaption when an image and its visible caption form a meaningful unit. The caption can provide context for everyone; it does not automatically replace alt. Avoid repeating a long caption word for word in the alternative text. A figure is optional for ordinary inline images.

Working example

The HTML shown here is the body fragment. The download includes the complete document.

<main><h1>Meet the author</h1>
<figure>
  <img src="avatar.svg" width="160" height="160" alt="Illustrated profile avatar">
  <figcaption>A placeholder illustration for this learning journal.</figcaption>
</figure></main>

Open in browser editor

Download working example

Try a change

Rename avatar.svg to author.svg in your downloaded folder and update src. Change the caption to explain why the journal uses an illustration. Keep the alt accurate.

What you should observe

The image still loads. Renaming only the file produces a broken image; changing src to the matching name repairs the path.

Check your understanding

A decorative flourish adds no information. Should its alt describe every curve?