Content presentation
-
Images
Use images only if there is a real user need. Avoid unnecessary decoration.
<figure class="nhsuk-image">
<img class="nhsuk-image__img" src="https://assets.nhs.uk/prod/images/S_0318_Bullous_pemphigoid_lesions_.2e16d0ba.fill-320x213.jpg" alt="Lots of sore red patches with small blisters spread across white skin on a woman's chest.">
<figcaption class="nhsuk-image__caption">
It can affect large areas of the body or limbs.
</figcaption>
</figure>Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Required | Description |
|---|---|---|---|
| Name src | Type string | Required true | Description The source location of the image. |
| Name alt | Type string | Required true | Description The alt text of the image. |
| Name caption | Type string | Required false | Description Optional caption text for the image. |
| Name sizes | Type string | Required false | Description A list of screen sizes for the browser to load the correct image from the srcset images. |
| Name srcset | Type string | Required false | Description A list of image source URLs and their respective sizes. Separate each image with a comma. |
| Name classes | Type string | Required false | Description Classes to add to the image container. |
| Name attributes | Type object | Required false | Description HTML attributes (for example data attributes) to add to the image container. |
{% from 'images/macro.njk' import image %}
{{ image({
"src": "https://assets.nhs.uk/prod/images/S_0318_Bullous_pemphigoid_lesions_.2e16d0ba.fill-320x213.jpg",
"alt": "Lots of sore red patches with small blisters spread across white skin on a woman's chest.",
"caption": "It can affect large areas of the body or limbs."
}) }}When to use images
Informative images that meet real user needs can be very important on health services - especially where they help users identify specific health problems and get the treatment they need.
We've also found users with some access needs (such as dyslexia) navigate health information (conditions and treatment) pages through images. Images help them orient themselves and they separate out the content.
But having unnecessary or decorative images can frustrate users, especially on information pages or transactional journeys.
The NHS.UK team is working on more guidance about when and how to use images.
How to use images
Images should flow with the text content, not appear too prominent or isolated.
We recommend stacking images. We've found that gallery views (images side by side) confuse users.
Captions
The image component is made up of 2 elements - the image and a caption underneath it in a white box.
Not all images need captions. If you use them:
- write a full sentence ending with a full stop
- keep captions short – ideally 1 sentence but no more than 2
- start the caption with a number if the images show a sequence
- do not duplicate alt-text (alternative text)
The caption assumes that the user can either see the image or read the alt-text. Use it to explain what you want users to conclude from it - for example, how serious their symptom is or what stage their condition has reached.
Here's an example. The alt-text is "Small red spots on white skin". The caption explains that that's how chickenpox starts.
Accessibility
Do not use images that have words in them, because screen readers will not be able to read the words.
Alternative text (alt-text)
Images must have text alternatives that describe the information or function they represent. This makes sure that people with disabilities can understand them.
When using an image (or the img element), specify a text alternative with the alt attribute.
Alt-text is not usually visible but is read out by screen readers or displayed if an image does not load or if images have been switched off.
Read more about alt-text in the guidance on using alt-text for images in content.
Long descriptions
With complex images, like images of skin symptoms, long descriptions help people who face barriers due to sight loss. Find out how to provide a long description in our skin symptoms guidance.
Research
In testing we found gallery views (images side by side) confused users. Users either missed the images in the right hand column or they didn't know how to interpret the sequence. To get around this we recommend stacking images.
We also found that users clicked images in gallery views, expecting them to appear larger in a pop-up modal. When we increased the size of the images and stacked them in 1 column (not 2), we didn't see anyone clicking on them to expand them.
We tested images on the chickenpox page on the NHS website in 2018. They tested well and all users said that the images helped them understand the symptoms.
Help us improve this guidance
Share insights or feedback and take part in the discussion. We use GitHub as a collaboration space. All the information on it is open to the public.
Read more about how to feedback or share insights.
If you have any questions, get in touch with the service manual team.
Updated: January 2023