Images

The <img> element embeds an image. It's a void element: no closing tag.

<img src="https://picsum.photos/seed/mirai/320/200" alt="A scenic landscape" width="320" height="200">

The two essential attributes

• src: the image's address (a URL, or a path to a file in your site).
• alt: a text description of the image.

Why alt text matters

Alt text is read aloud by screen readers, shown if the image fails to load, and used by search engines. Write what the image shows or does:

<img src="does-not-exist.png" alt="Bar chart of monthly sales, rising from 120 in January to 220 in June">

That broken image shows its alt text instead. If an image is purely decorative, use an empty alt (alt="") so screen readers skip it.

Size

Set width and height (in pixels) so the browser reserves the right space before the image loads, which stops the page from jumping around. Resize with CSS for responsive layouts:

<img src="https://picsum.photos/seed/resize/600/300" alt="Mountains" style="width:100%;max-width:400px;height:auto;border-radius:12px">

Captions with figure

<figure> groups an image with a caption in <figcaption>:

<figure>
  <img src="https://picsum.photos/seed/caption/300/180" alt="City at night" width="300" height="180">
  <figcaption>Figure 1: A city skyline at night.</figcaption>
</figure>

Lazy loading

Images far down a page don't need to load straight away. loading="lazy" waits until they're about to scroll into view, which speeds up the page:

<img src="photo.jpg" alt="..." loading="lazy">

Formats