Image and figure

A photograph with a caption, and a grid of them. The rules matter more than the markup: alt text or caption, decided once; small files; never text on top of a photo.

The minister opens the new data centre in Abuja, September 2026. Photo: Ministry press office.

Show HTML

<figure class="ag-figure ag-figure--3-2 ag-mb-0" style="max-width: 32rem">
  <img
    class="ag-figure__image"
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23c7d6e3'/%3E%3Ccircle cx='2.3' cy='0.5' r='0.25' fill='%23ffbf47'/%3E%3Cpath d='M0 2 L0.9 1 L1.5 1.6 L2.1 0.9 L3 1.7 V2 Z' fill='%231f4e79'/%3E%3C/svg%3E"
    alt=""
    width="1200"
    height="800"
    loading="lazy"
  />
  <figcaption class="ag-figure__caption">
    The minister opens the new data centre in Abuja, September 2026. Photo: Ministry press office.
  </figcaption>
</figure>

A placeholder drawing stands in for a photograph here. The markup is the same.

Gallery

Opening session, day one.
Delegates from 44 member states.
The closing communiqué is signed.

Show HTML

<ul class="ag-gallery ag-mb-0">
  <li>
    <figure class="ag-figure ag-figure--3-2">
      <img
        class="ag-figure__image"
        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23c7d6e3'/%3E%3C/svg%3E"
        alt=""
        width="600"
        height="400"
        loading="lazy"
      />
      <figcaption class="ag-figure__caption">Opening session, day one.</figcaption>
    </figure>
  </li>
  <li>
    <figure class="ag-figure ag-figure--3-2">
      <img
        class="ag-figure__image"
        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23d9e4ec'/%3E%3C/svg%3E"
        alt=""
        width="600"
        height="400"
        loading="lazy"
      />
      <figcaption class="ag-figure__caption">Delegates from 44 member states.</figcaption>
    </figure>
  </li>
  <li>
    <figure class="ag-figure ag-figure--3-2">
      <img
        class="ag-figure__image"
        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23c7d6e3'/%3E%3C/svg%3E"
        alt=""
        width="600"
        height="400"
        loading="lazy"
      />
      <figcaption class="ag-figure__caption">The closing communiqué is signed.</figcaption>
    </figure>
  </li>
</ul>

Gallery columns

The gallery fits as many columns as the width allows. For a fixed layout, ag-gallery--2 gives two large images side by side and ag-gallery--4 a tighter grid of four.

Rules

Caption or alt, not both. A captioned figure gets alt=""; the caption is the description. An image without a caption needs alt text that says what it shows, in one sentence.
Decorative means empty. If removing the image loses nothing, alt="". Never "image" or "photo" as alt text.
Always width and height attributes, so the page does not jump while the image loads on a slow connection.
Lazy-load everything below the fold with loading="lazy". Never the hero image.
Budget: 150 KB per image, 1200px wide at most, as JPEG or WebP with a srcset for phones. A page of photographs on a 2G connection should still open in under ten seconds.
No text over photographs. There is no contrast you can guarantee. Put text beside the image or on a solid panel.
No carousels. One image, or a gallery people scroll.

Aspect ratios

ag-figure--3-2 for photographs, ag-figure--16-9 for video stills and wide shots, ag-figure--square for portraits in a grid. The image is cropped to fit, so keep the subject near the centre.