Images & Figures

Images carry most of a page's visual weight. Done right they look sharp on every device, load fast, and are readable by search engines and screen readers. Done wrong they slow the page, shift the layout, and hurt your rankings.

The image element

<img
  src="sourdough.jpg"
  alt="Golden sourdough loaf scored with a wheat pattern"
  width="800"
  height="600"
  loading="lazy"
>

Expected output: the image renders at 800×600 (scaled down by CSS if needed). If the file is missing, the alt text appears instead.

Why alt text matters

Alternative text is read aloud by screen readers, displayed when the image fails to load, and indexed by Google Images. Write a sentence a sighted person would not learn anything new from:

Preventing layout shift (Core Web Vitals)

Without dimensions, the browser reserves zero space while loading, then pushes content down when the image arrives — a metric called CLS (Cumulative Layout Shift). Always declare width and height; CSS can still make the image fluid with style="max-width:100%;height:auto" or a class.

Responsive images: srcset and sizes

<img
  src="cake-800.jpg"
  srcset="cake-400.jpg 400w, cake-800.jpg 800w, cake-1600.jpg 1600w"
  sizes="(max-width: 640px) 100vw, 800px"
  alt="Three-layer chocolate cake with ganache drip"
  width="1600"
  height="1200"
  loading="lazy"
>

The browser picks the best file for the visitor's screen and connection — phones download the 400w version, retina laptops the 1600w. This directly improves LCP (Largest Contentful Paint), a Core Web Vital.

<picture> for art direction

When the crop should change (not just the size), use <picture>:

<picture>
  <source srcset="banner-wide.avif" type="image/avif">
  <source srcset="banner-wide.webp" type="image/webp">
  <img src="banner.jpg" alt="Team photo in front of the bakery" width="1600" height="600">
</picture>

Browsers that understand AVIF/WebP get the smaller modern format; everyone else falls back to the <img> inside. Modern formats are typically 30–50% smaller than JPEG at the same quality.

Figures and captions

<figure>
  <img src="crumb-shot.jpg" alt="Close-up of an airy sourdough crumb" width="800" height="533">
  <figcaption>Figure 1: A well-fermented crumb has irregular, glossy holes.</figcaption>
</figure>

<figure> + <figcaption> semantically binds an image to its caption — perfect for tutorials, diagrams, and charts. Captions are read by screen readers, so keep them informative.

Real-life use case

A bakery's menu page ships three versions of every photo (400w/800w/1600w), declares dimensions to keep CLS near zero, writes descriptive alt text mentioning the actual dish (which earns Google Images traffic), and wraps signature dishes in <figure> with preparation notes as captions.

Common mistakes

• Omitting alt — invalid HTML and an accessibility failure.
• Using images for text — headings, slogans, and buttons baked into images are unreadable by search engines and screen readers. Use real text + CSS.
• Massive PNG screenshots — convert photos to JPEG/WebP and screenshots to compressed WebP.
• Missing dimensions — causes CLS, one of the three Core Web Vitals.
• Absolute URLs for local images — src="/img/logo.png" or relative paths keep deploys portable.

Best practices

• Add loading="lazy" to below-the-fold images — but not to the hero image, which should load eagerly.
• Compress every asset (aim under ~150 KB for content images).
• Use descriptive file names: sourdough-crumb.jpg, not IMG_4021.jpg.
• For icons, prefer inline SVG — infinitely sharp and styleable with CSS.

What's next?

Organise content with Lists, present tabular data with Tables, or jump to HTML Accessibility to deepen your alt text skills.