Images and Alt Text

A page without images is rare, and an image on a web page is not part of the HTML file at all. It is a separate file that the HTML points at, plus a sentence for everyone who cannot see it. That sentence, called the alt text, is the part beginners most often skip and the part that matters most, because for some visitors it is the only version of the image there is.

Think of describing a photo to a friend over the phone. You would not say "a JPEG, twelve hundred pixels wide". You would say what matters about it right now: "it's the soup I made, with basil on top". Alt text is that phone description, written once and read out every time someone needs it.

Putting an Image on the Page

An image is placed with an img element. It is one of the empty elements from topic 1: no content and no closing tag, because everything it needs is in its attributes. The src attribute, short for source, holds the path to the image file, written exactly like the relative paths in topic 3.

<img
  src="images/tomato-soup.jpg"
  alt="A bowl of tomato soup topped with fresh basil leaves"
  width="1200"
  height="800">

Attributes can sit on separate lines, as here, when a tag gets long; the browser reads them the same way. This element expects a photo called tomato-soup.jpg in a folder named images, next to the page. The browser shows the photo at the point in the page where the element sits. If the file is missing or the path is wrong, most browsers show the alt text in its place, sometimes beside a small broken-image icon.

Remember from Chapter 1 that every file a page mentions is a separate request. The browser reads the HTML first, meets the img element, and only then asks the server for the photo. Large photos are often most of what a page has to download, which is why Chapters 5 and 13 come back to them.

Writing Alt Text: What Is the Image For?

The alt attribute, short for alternative text, is what a screen reader reads aloud in place of the image. It is also what appears if the image fails to load, and what a search engine reads to understand it. Good alt text describes what the image is for in that spot, in a sentence or less.

<!-- 1. No alt at all -->
<img src="images/tomato-soup.jpg" width="1200" height="800">

<!-- 2. Alt that says nothing -->
<img src="images/tomato-soup.jpg" alt="image" width="1200" height="800">

<!-- 3. Alt that does the job -->
<img src="images/tomato-soup.jpg" alt="A bowl of tomato soup topped with fresh basil leaves" width="1200" height="800">

On screen, all three look identical: the same photo. To a screen-reader user they are very different. With no alt at all, many screen readers fall back to reading the file name aloud, and others say only that there is an image with no description. With alt set to the word image, the listener hears "image" twice: once from the screen reader naming what it found, once from your text. Only the third tells them what everyone else can see.

The right description depends on the image's job. On a recipe page, the soup photo shows what the dish looks like, so describe the dish. If the same photo is the only content of a link to the recipe, the alt text becomes the link text, so it should say where the link goes: "Tomato soup recipe". There is no need to start with "image of" or "picture of"; the screen reader already announces that it is an image.

Some images carry no information at all: a decorative wavy line between sections, a background flourish. Give those an empty alt, two double quotes with nothing between them. Screen readers then skip the image entirely, which is what a listener wants. An empty alt and a missing alt are opposites: empty says "nothing to describe here", missing says "nobody thought about it".

<img src="images/wavy-line.svg" alt="" width="600" height="20">

This shows a thin wavy line, and a screen reader says nothing at all about it.

Why Give the Width and Height?

The page's text usually arrives before its images. If the browser does not know how big an image will be, it lays the text out with no space for it, and when the photo finally arrives, everything below jumps down to make room. You have probably tried to tap a link on a phone at the moment the page lurched and hit something else instead. That jump is called a layout shift.

The width and height attributes prevent it. They are the image's size in pixels, written as plain numbers without units, and from them the browser works out the image's shape before the file arrives and reserves exactly that space. The numbers describe the shape; they do not lock the size. CSS can still make the image smaller to fit a narrow screen, as Chapter 5 does, and as long as that CSS lets the height adjust with the width, the browser keeps the shape the numbers gave it.

Which File Format?

Image files come in several formats, and each suits a different kind of picture. JPEG is the long-standing format for photographs. PNG keeps sharp edges and flat colours crisp and supports transparent areas, which suits screenshots and diagrams. SVG is different in kind: it describes shapes rather than storing pixels, so a logo or icon in SVG stays sharp at any size and the file stays small.

Two newer formats, WebP and AVIF, store photos and graphics in noticeably smaller files than JPEG and PNG at similar quality. Both work in every major browser; AVIF became widely available in 2026. Most image editors and free online converters can save in either.

Image	Format	Alt text
A photo of the dish on a recipe page	JPEG, or WebP or AVIF for a smaller file	What the dish looks like
The site's logo in the header	SVG	The name the logo shows
A screenshot in a how-to guide	PNG	What the reader needs from it, such as which setting is chosen
A decorative divider	SVG	Empty: two quotes, nothing between

Figures and Captions

Sometimes an image needs a caption that everyone sees, such as a note on a chart or the credit for a photo. HTML has a pair of elements for that: figure wraps the image, and figcaption inside it holds the caption. The two are tied together in the page's structure, so a screen reader can announce the caption as belonging to the image.

<figure>
  <img src="images/tomato-soup.jpg" alt="A bowl of tomato soup topped with fresh basil leaves" width="1200" height="800">
  <figcaption>Ready in thirty minutes, and better the next day.</figcaption>
</figure>

The browser shows the photo, indented a little from both sides, with the caption in ordinary text beneath it. The alt text and the caption do different jobs, so they should not repeat each other: the alt describes what the image shows, and the caption adds what nobody could see in it.