Content presentation - Images

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

Open this images example in new window
<figure class="nhsuk-image">
  <img class="nhsuk-image__img" src="" alt="Picture of allergic conjunctivitis">
  <figcaption class="nhsuk-image__caption">
    Itchy, red, watering eyes
{% from 'images/macro.njk' import image %}

{{ image({
  "src": "",
  "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 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.


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.


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 in 2018. They tested well and all users said that the images helped them understand the symptoms.

Help improve this page

The manual is a community effort. Anyone can help improve and grow it.

To help make sure the Images guidance is useful, relevant and up to date, you can:

Need help?

If you’ve got a question about the NHS digital service manual or want to feedback, get in touch.

Updated: December 2020