Content presentation - Images

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

Open this images example in new window
Copy
<figure class="nhsuk-image">
  <img class="nhsuk-image__img" src="https://assets.nhs.uk/prod/images/S_1017_allergic-conjunctivitis_M15.2e16d0ba.fill-320x213.jpg" alt="Picture of allergic conjunctivitis">
  <figcaption class="nhsuk-image__caption">
    Itchy, red, watering eyes
  </figcaption>
</figure>
Close
Copy
{% from 'images/macro.njk' import image %}

{{ image({
  "src": "https://assets.nhs.uk/prod/images/S_1017_allergic-conjunctivitis_M15.2e16d0ba.fill-320x213.jpg",
  "alt": "Picture of allergic conjunctivitis",
  "caption": "Itchy, red, watering eyes"
}) }}
Close

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

The image component is made up of 2 elements - the image and caption - in a white box.

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.

Accessibility

Follow our guidance on making images accessible. 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. Alternative text, or alt text, is read out by screen readers or displayed if an image does not load or if images have been switched off.

Do not use images that have words in them, because screen readers will not be able to read the words.

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 nhs.uk 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: December 2020