Content presentation - Images

Use images only if there is a real user need. Avoid unnecessary decoration.

Open this default images example in new window
Copy default images code
<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&#39;s chest.">
  <figcaption class="nhsuk-image__caption">
    It can affect large areas of the body or limbs.
  </figcaption>
</figure>
Close default images code
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.

Nunjucks arguments for default images
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.
Copy default images code
{% 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."
}) }}
Close default images code

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.

We are working on more guidance about when to use images. We expect to publish it in 2021.

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.

Small red spots on white skin
1. Chickenpox starts with red spots. They can appear anywhere on the body.

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.

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.

Have you tested this component?

If so, please share your research findings and let us know how it has worked for you. This will help us improve it for everyone.

Before you start, you will need a GitHub account. It's an open forum where we collect feedback.

If you have any questions, you can message us on Slack. You will need a Slack account if you do not have one. Or you can contact us by email.

Updated: August 2021