Adding Images with the img Tag in HTML

The <img> tag embeds an image into the page. It's a void element — no closing tag, no content between tags.

<img src="cat.jpg" alt="A sleeping orange cat on a windowsill" width="400" height="300">

Key attributes:

src (required) — the path or URL to the image file.
alt (required for accessibility) — describes the image for screen reader users and displays if the image fails to load. Never leave this empty for meaningful images; use alt="" only for purely decorative images.
width / height — reserving these prevents the page from "jumping" as images load, which improves perceived performance.

Images can also be wrapped in <figure> with a caption:

<figure>
  <img src="chart.png" alt="Bar chart showing quarterly sales growth">
  <figcaption>Fig 1: Quarterly sales growth, 2025</figcaption>
</figure>

For responsive images that adapt to screen size or resolution, use srcset:

<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px, 800px"
     alt="Mountain landscape at sunset">

This lets the browser choose the most appropriately sized image file for the visitor's device, saving bandwidth on smaller screens.