Figure

When to use it

• For the hero image on an article, and any image inside the body.
• Always with a credit. The archive summarises other publishers, and their photographs are theirs.

• Do not use it for decoration. An image that carries no information is weight on a phone connection.
• Do not put the caption in the alt text, or the alt text in the caption. They do different jobs.

Hero image with caption and credit

HTML

Copy

<figure class="p234-figure">
  <img src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 450'%3E%3Crect width='800' height='450' fill='%23ddd8cf'/%3E%3Ctext x='400' y='230' font-family='sans-serif' font-size='22' fill='%236e6b62' text-anchor='middle'%3EArticle image%3C/text%3E%3C/svg%3E" alt="Queue of vehicles at a filling station in Lagos" width="800" height="450">
  <figcaption>
    Motorists queue in Ikeja as pump prices move ahead of the last official figure.
    <span class="p234-figure__credit">Photograph: Reuters</span>
  </figcaption>
</figure>

Sizes

There is one shape, 16:9, because that is what the image service returns. Everything else is a named exception.

Portrait and inset

HTML

Copy

<figure class="p234-figure p234-figure--portrait" style="max-width:14rem">
  <img src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400'%3E%3Crect width='300' height='400' fill='%23ddd8cf'/%3E%3Ctext x='150' y='205' font-family='sans-serif' font-size='18' fill='%236e6b62' text-anchor='middle'%3EPortrait 3:4%3C/text%3E%3C/svg%3E" alt="Portrait of a legislator" width="300" height="400">
  <figcaption>Senator for Yobe North. <span class="p234-figure__credit">Photograph: NASS</span></figcaption>
</figure>

What the service actually serves

Requests go to the image CDN, which returns WebP at the width asked for, in 16:9. Ask for the width the image is drawn at, doubled for phone screens: a 140px thumbnail requesting 800 downloaded about five times the bytes it showed.

Two things to know before trusting the shape:

• Only images on our own storage can be resized. Roughly a third of the archive, mostly older articles that search surfaces, is hosted elsewhere and arrives at its original size and shape. Those use --unsized.
• The article hero currently declares 1200 by 630 while the service returns 16:9, so the declared height has never matched the delivered one. Declare the ratio the service returns.

Alt text and caption

The alt text describes the image for someone who cannot see it. The caption says why the image is on the page. If the caption already describes the picture fully, the alt text can be empty and the image marked decorative, but that is rare on a news page.

• Write alt text as a plain sentence about what is shown.
• Keep the credit in its own span so it can be styled down without losing the caption.
• Always set width and height so the page does not jump when the image lands.

Loading

The hero image is usually the largest thing on an article and sets the page's load speed. It should be served at the size it renders, in a modern format, and it should not be lazy-loaded: it is the first thing in view.