What is alt text for, and when should it be empty?

It describes the image for screen-reader users, when the image fails to load and for search engines. It should be empty (alt="") only when the image is purely decorative and adds no information.

Why set width and height on images?

So the browser can reserve the right amount of space before the image downloads, which stops the page content from jumping (layout shift).

Which image format would you use for a logo, and which for a photo?

SVG for a logo, because it stays sharp at any size; JPEG, WebP or AVIF for photos, because they compress photographic detail into small files.

Images — HTML5 for Beginners: Build Your First Web Pages

What you'll learn

How to show an image with <img>.
How to write alt text, and why it matters.
Why you should set width and height.
Which image format to use, and how to add a caption.

The idea

The `<img>` element

<img src="images/beach.jpg" alt="Children building a sandcastle on a sunny beach" width="800" height="600">

src (source) is the image's address: a relative path for your own images or a full URL.
alt (alternative text) describes the image in words.
width and height give its size in pixels.

<img> is a void element: no closing tag.

Why alt text matters

Alt text is used when the image can't be seen:

Screen readers read it aloud to blind and partially sighted people.
It appears if the image fails to load.
Search engines use it to understand the image.

Describe what's important about the image in this context, briefly. If an image is only decoration (a swirl, a background pattern), use an empty alt="" so screen readers skip it. Never leave alt out completely.

Why width and height matter

Images download after the text. Without width and height, the browser doesn't know how much space to save, so the text jumps down when the image arrives. With them, the space is reserved from the start. (Later, CSS can still make the image resize for phones.)

Which format?

Format	Best for
JPEG (`.jpg`)	Photos
PNG (`.png`)	Screenshots, images that need transparency
SVG (`.svg`)	Logos and icons: sharp at any size
WebP, AVIF	Modern formats: much smaller files for photos

Captions with `<figure>`

<figure>
  <img src="chart.png" alt="Bar chart: visitors doubled from January to June" width="600" height="300">
  <figcaption>Visitors to the site in the first half of the year.</figcaption>
</figure>

Try it

The images here are drawn with SVG code instead of loaded from files, so they work everywhere. The second image's file doesn't exist, so you'll see its alt text instead:

Images, alt text and captionsTry it yourself

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Images</title>
</head>
<body>
  <h1>Images</h1>

  <figure>
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect width='300' height='150' fill='%2338bdf8'/%3E%3Ccircle cx='240' cy='40' r='22' fill='%23facc15'/%3E%3Crect y='110' width='300' height='40' fill='%23fde68a'/%3E%3C/svg%3E"
         alt="A simple drawing of a beach: blue sky, a yellow sun and sand"
         width="300" height="150">
    <figcaption>My drawing of a beach.</figcaption>
  </figure>

  <p>This image file is missing, so the browser shows its alt text:</p>
  <img src="missing-photo.jpg" alt="Our dog Biscuit catching a ball" width="300" height="80">

  <p>The text below doesn't jump, because the image has a width and height.</p>
</body>
</html>

Your turn

Change the first image's alt text so it would make sense to someone who can't see the picture.
Add another <figure> with a <figcaption>. You can copy the src from the first image.
On your own computer, put a photo in an images folder next to index.html and show it with <img src="images/your-photo.jpg" ...>.

Common mistakes

Missing alt. Every image needs one; use alt="" only for pure decoration.
Alt text that starts with "Image of". Screen readers already say it's an image. Just describe it.
Huge photos. A 5 MB photo from a phone makes pages slow. Resize photos for the web and use JPEG, WebP or AVIF.
Wrong path or wrong capital letters. Images/Cat.JPG and images/cat.jpg are different files on most web servers.

Key points

<img src="..." alt="..." width="..." height="..."> shows an image.
Alt text describes the image for screen readers, broken images and search engines; decorative images get alt="".
width and height stop the page from jumping while images load.
Use JPEG/WebP/AVIF for photos, PNG for screenshots, SVG for logos; add captions with <figure> and <figcaption>.