Images & alternatives

01The image element

An img element needs a source and an appropriate alternative. Width and height help the browser reserve space before the image arrives.

<img src="images/kitchen.webp"
     alt="Oak kitchen with a white island"
     width="1200" height="800">

02Write useful alternative text

Describe the information the image contributes. A purely decorative image should use an empty alt attribute. Do not put important instructions only inside an image.

<img src="divider.svg" alt="">
<figure>
  <img src="desk.webp" alt="Wall-mounted oak desk" width="900" height="600">
  <figcaption>A compact workspace.</figcaption>
</figure>

03Load the right amount

Resize and compress files before publishing. Use lazy loading for images lower down the page, not automatically for the main hero image. CSS can keep an image within its container.

<img src="gallery.webp" alt="Finished shelving"
     width="900" height="600" loading="lazy">
<style>
  img { max-width: 100%; height: auto; }
</style>

04Try it yourself

Change the caption. For a real photo, describe what it communicates in alt text.

Further reading

Use the MDN learning guides and HTML Living Standard for deeper explanations and current browser guidance.