Pictures — usually screenshots or images of icons used as affordances or to indicate status — can be effective supplements to textual information, but must be handled consistently and judiciously.
File formats
| Image | File format |
|---|---|
| Screenshot | PNG |
| Diagram | SVG |
| Math notation | MathML or LaTeX |
Placement and Labeling
Small images can be placed inline with the text, especially where their use is to communicate a UI affordance such as a status indicator or icon that is activated to perform a step. These images should have alternative text but no other label.
Larger images, such as screenshots or schematic illustrations, are considered figures and should be set off from the flow of text.
Most figures do not require a title. When needed, the title should be a brief noun phrase. The title, if used, should not be prefixed with the word figure or figure numbering.
Surrounding body copy should indicate the purpose and nature of illustrations or figures whether or not a title is used.
If the figure does not have a clear rectangular boundary or could be confused with surrounding information, you can choose to add a border to the figure. Do not add the border in the image file, but as an attribute of the figure itself.