Media
Images, grids and animations: what the page can do with artwork, shown as source and as it renders.
Five ways to place artwork on a page, and when each is right.
A single image
The default. It fills the reading column.
A screen reader user gets the alt text instead of the picture, so write what the image shows, not what it is.
With a caption
Italic text on the line directly under an image becomes its caption.
_What the caption adds that the image does not say by itself._
What the caption adds that the image does not say by itself.
Do
Use the caption to make the point, not to name the picture. "Here the recipient is larger than the amount" beats "Send screen".
A grid
Two or more images that belong together, side by side on a wide screen and stacked on a phone. Use it for a good and bad comparison, or a sequence of screens.
<div class="image-grid">
_What it shows._
_What it shows._
</div>
Each image in a grid keeps its own caption.
And the two read as one figure rather than two.
Don't
Put two images meant to be compared in separate paragraphs. A reader on a phone sees one, scrolls, and sees the other with the comparison lost.
Centred and inline
For a square or portrait image that would look odd stretched across the column, and the text that belongs to it.
<div class="center" markdown="1">
The text that goes with it, centred under the image.
</div>
The text that goes with it, centred under the image.
Animation
A short animated GIF works like any other image and passes through the build untouched, so it keeps moving.
Do
Provide the same information in the surrounding text. An animation is unavailable to anyone who has asked their system for reduced motion, and unreadable to anyone who cannot watch it twice.
Don't
Use an animation where a labelled sequence of stills would do. Stills can be read at the reader's pace, printed, and quoted.
Prototypes and video
Embedded prototypes and video players are deliberately not supported. They pull a third party into every page view, and they do not print, quote or archive.
Do
Link out to the prototype or the video, and put a still of it on the page with a caption saying what the reader will see.
Sizes
Export at 2x. See Illustration guidelines for sizes.
Related
Written from: components/guide/markdown.tsx, components/guide/guide-image.tsx.
Checklist
The rules on this page, in a form you can work through.
5 rules