Images and alternative text

Alternative text replaces purpose, not pixels

Describe the information or function the image contributes. If nearby text already communicates everything and the image is decorative, use an empty alt value.

<img
  src="trail-map.webp"
  width="1200"
  height="800"
  alt="Map showing the accessible loop from the visitor center to Lake Point"
/>

Explicit dimensions let the browser reserve the correct aspect ratio before the file arrives. CSS can still make the image responsive.

img {
  max-width: 100%;
  height: auto;
}

Common mistakes

• Repeating “image of” when the role is already announced.
• Stuffing keywords into alt.
• Using a filename as alternative text.
• Omitting dimensions and causing content to jump.

Exercise

Choose one informative and one decorative image. Write the text a person would need if neither image loaded, then decide which image needs that text.