Images

Add images to the app/assets/images folder. You can also use subfolders to organise them if you have a lot of images.

Using the image component

Use the image component from the NHS design system if you have an informative image with an optional caption.

Use alt text to describe the image for screen readers.

For example, if you had an image named stretch-marks.jpg, reference it in your page like this:

{{ image({
  src: "/assets/images/stretch-marks.jpg",
  alt: "Close-up of a person's tummy showing a number of creases in the skin under their belly button. Shown on light brown skin.",
  caption: {
    text: "Stretch marks can be pink, red, brown, black, silver or purple. They usually start off darker and fade over time."
  }
}) }}

Using the img HTML element

You can also include images in pages using the <img> element within HTML.

For example:

Available in
<img src="/assets/images/bsl.png" alt="British Sign Language">