Skip to main content

Images

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

Open 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>
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"
}) }}

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 spring 2019.

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 W3C's 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.

Don't use images that have words in them, because screen readers won't be able to read the words.

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. Follow the guidance on alternative text in the GOV.UK Design System.

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.

Discuss

Discuss images on GitHub

Get in touch

If you have a question:

Updated: February 2019