Images and Media

Media can explain what text cannot, but it also affects performance and accessibility. The right markup gives browsers enough information to load it efficiently.

Images with purpose

Every img needs an alt attribute. Describe informative images; use an empty value for decoration so assistive technology can skip it.

01<img
02  src="ada-lovelace.webp"
03  alt="Portrait of Ada Lovelace writing at a desk"
04  width="960"
05  height="640"
06  loading="lazy"
07/>

Width and height reserve space before the image arrives, reducing layout movement. Lazy loading is useful below the initial viewport, but the primary hero image should usually load normally.

Captions and responsive sources

01<figure>
02  <picture>
03    <source srcset="layout-dark.webp" media="(prefers-color-scheme: dark)" />
04    <img src="layout-light.webp" alt="Three-column page layout" width="1200" height="700" />
05  </picture>
06  <figcaption>The same layout in both color schemes.</figcaption>
07</figure>

Use picture when the content or crop should change. Use srcset and sizes when the same image needs multiple resolutions.

Audio and video

01<video controls width="720" poster="lesson-cover.webp">
02  <source src="lesson.webm" type="video/webm" />
03  <track kind="captions" src="captions-en.vtt" srclang="en" label="English" default />
04  Your browser cannot play this video.
05</video>

Keep this

Supply useful alternatives, intrinsic dimensions, appropriate loading behavior, and controls that leave playback in the learner's hands.