Français

<img>

Display an image — and why a bad alt is worse than none

— 2 min read

  • HTML
  • accessibility
  • semantics
  • media

<img> — Images

The <img> element embeds an image in your page. The alt attribute describes the image for people who cannot see it. Without alt, the image is invisible to screen readers.

When to use it

You want to display a photo, a diagram, an illustration. If the image is informative, provide a descriptive alt. If it is decorative (pure ornamentation), use alt="" so assistive technologies skip it.

What you gain

Accessibility: the alt text is read aloud by screen readers. An image without alt creates a gap in the content. An empty alt (alt="") explicitly signals "nothing to read here".

SEO: Google uses alt to index images in Google Images (Google documentation).

Code example

<!-- Informative image: describe what you see -->
<img
  src="/photos/team-workshop.webp"
  alt="Five team members collaborating around a whiteboard covered in sticky notes"
  width="800"
  height="600"
  loading="lazy"
/>
 
<!-- Decorative image: empty alt -->
<img src="/decorations/wave-divider.svg" alt="" />

Further reading