Images, video and audio

The img element

<img> is a void element, so it has no closing tag. The src attribute (source) gives the path or URL of the image file. The alt attribute (alternative text) describes the image. Screen readers read it aloud, and the browser shows it if the image fails to load.

<img
  src="images/masala-dosa.jpg"
  alt="Crispy masala dosa with coconut chutney and sambar"
  width="600"
  height="400"
  loading="lazy">

Writing good alt text

An empty alt="" says "this image is decoration, skip it". A missing alt attribute is different: some screen readers then read out the file name, like "IMG underscore 2034 dot jpg". So always write the alt attribute, even when it is empty.

Width, height and lazy loading

The width and height attributes are plain numbers in pixels, without "px". They let the browser reserve the right space before the image arrives, so the text below does not jump. That jump is called layout shift, and it makes people tap the wrong thing. CSS such as max-width: 100%; height: auto; can still make the image shrink on phones.

loading="lazy" tells the browser to wait until the image is close to the screen before downloading it. This saves data on long pages. Do not lazy-load the big image at the very top of the page, because the visitor needs it at once.

Figure and figcaption

<figure>
  <img src="thali.jpg" alt="South Indian thali on a banana leaf" width="800" height="533">
  <figcaption>Our Sunday special thali, ₹&nbsp;180</figcaption>
</figure>

Responsive images and modern formats

srcset lists several sizes of the same image, and sizes tells the browser how wide the image will show. The browser then downloads the smallest file that still looks sharp. The <picture> element lets you offer newer formats first, with an older format as a fallback.

<picture>
  <source srcset="kurta.avif" type="image/avif">
  <source srcset="kurta.webp" type="image/webp">
  <img src="kurta.jpg" alt="Red cotton kurta, front view" width="600" height="800">
</picture>

<img src="shop-800.jpg"
  srcset="shop-400.jpg 400w, shop-800.jpg 800w, shop-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="Front of the shop with fruit crates" width="800" height="600">

WebP and AVIF are modern image formats. They are often much smaller than JPEG or PNG at the same quality, and all current browsers support them. Smaller images mean faster pages on mobile data.

Video and audio

<video controls width="640" height="360" poster="recipe-poster.jpg" preload="metadata">
  <source src="recipe.mp4" type="video/mp4">
  <track kind="captions" src="recipe-en.vtt" srclang="en" label="English">
  <a href="recipe.mp4">Download the recipe video</a>
</video>

<audio controls src="bhajan.mp3"></audio>