Images and why alt text matters

Introduction

Images do a lot of a page's work: they explain, persuade and decorate. They are also usually the heaviest thing on the page, and they are invisible to anyone who cannot see them. Writing an image well means thinking about all of that.

How it works

img is a void element: it has no content and no closing tag. It needs two attributes.

src says where the file is, using an absolute or relative address, just like href.

alt holds the alternative text. It is read aloud by screen readers. It is also shown when the image fails to load, and search engines use it to understand the picture. Write it by asking: if I had to replace this image with words, what would I say?

• An informative photo: alt="A baker lifting bread from an oven".
• A link that is only an image: describe where it goes: alt="Home".
• Pure decoration: use an empty alt="". This is different from leaving the attribute out. An empty alt tells a screen reader to skip the image. With no alt at all, many screen readers read out the file name instead.

Do not start with "Image of". The screen reader has already announced that it is an image.

width and height give the image's size in pixels, without units. They matter even when CSS changes the display size. Images download after the HTML, so without these numbers the browser reserves no space, and the text below jumps down when the image arrives. That is layout shift, and it is why you sometimes click the wrong thing on a slow page. With the numbers, the browser knows the shape in advance and keeps the space free.

loading="lazy" tells the browser not to fetch an image until the reader scrolls near it. Use it for images far down the page, but not for the main image at the top.

File formats.

The figure element groups an image with a visible caption in figcaption.

Syntax

<img src="bread.jpg" alt="A loaf of brown bread" width="640" height="480">

Example

This example uses a small SVG written as a data address, so that it works without a separate file.

Line by line

1. figure groups the picture and its caption.
2. src here holds the image data itself. Usually it would be a file path such as sun.svg.
3. alt says what the picture shows.
4. width and height reserve 180 by 120 pixels before the image is loaded.
5. figcaption is visible text that belongs to the image.

Expected result

An orange circle on a light blue rectangle, with the caption underneath.

In the real world

Images are often more than half of the weight of a page, so reducing them is usually the fastest way to speed up a site. Accessibility laws in many countries require text alternatives on public websites. Online shops also depend on good alt text and captions for image search.

Common mistakes

• Leaving out alt instead of writing alt="" for decoration.
• Filling alt with keywords, which reads as nonsense to a person.
• Using a giant photo and shrinking it with CSS. Visitors still download every byte.
• Lazy loading the main image at the top, which delays what people see first.

Best practices

• Always set alt, width and height.
• Export images at about the size at which they are shown.
• Do not put important text inside an image: it cannot be selected, translated or read.

Summary

img needs a src and an alt. Alt text replaces the image in words, and decorative images get an empty alt. Width and height stop the page from jumping, lazy loading saves data, and the right file format keeps pages fast.

Mark lesson complete