Cookies on ons.gov.uk

Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.

We would like to set additional cookies to remember your settings and understand how you use the site. This helps us to improve our services.

View cookies

You have accepted all additional cookies. You have rejected all additional cookies. You can change your cookie preferences at any time.

Skip to main content

This website no longer supports your browser. You can upgrade your browser to the latest version.

BETA

This is a new service. To help us improve it, give feedback

Service manual
Search results
    Use up and down keys to navigate results once you've typed more than two characters. Use the enter key to select a result. Touch device users, explore by touch or with swipe gestures.

    Information and media Image

    Overview

    Adds an image to the page with an optional caption.

    Improved approach for retina screens

    Uses two versions of the image, one for standard screens and the other for retina screens.

    We specify a folder path for both small and large images which is defined in the macro as smallSrc and largeSrc. The filename is expected to be the same for both.

    If the image is decorative and does not convey important information, do not add an alt tag. This will then be hidden from screen reader users.

    Open this example in a new tab (Example Image For Retina Screens)

    Example Image For Retina Screens contents

    Nunjucks

    {% from "components/image/_macro.njk" import onsImage %}
{{
    onsImage({
        "image": {
            "smallSrc": '/img/small/woman-in-purple-dress-shirt.jpg',
            "largeSrc": '/img/large/woman-in-purple-dress-shirt.jpg'
        },
        "caption": 'Image 1 - Woman in a purple dress shirt using a laptop'
    })
}}

    Nunjucks macro options

    [object Object]undefined
    [object Object]undefined
    [object Object]

    HTML

    <figure class="ons-figure">
  <div class="
                ons-figure__content
                
                ons-u-mb-l
            ">
    <div class="ons-image">
      <img class="ons-image__img"
        srcset="/img/small/woman-in-purple-dress-shirt.jpg 1x, /img/large/woman-in-purple-dress-shirt.jpg 2x"
        src="/img/small/woman-in-purple-dress-shirt.jpg" alt="" />
    </div>
  </div>
  <figcaption class="ons-figure__caption">Image 1 - Woman in a purple dress shirt using a laptop</figcaption>
</figure>

    Old approach

    Specifies a single image that would appear blurry on retina displays.

    This continues to use the original macro property url for the image path.

    Open this example in a new tab (Example Image For Regular Screens)

    Example Image For Regular Screens contents

    Nunjucks

    {% from "components/image/_macro.njk" import onsImage %}
{{
    onsImage({
        "src": '/img/small/woman-in-purple-dress-shirt.jpg',
        "alt": 'Woman in a purple dress shirt using a laptop',
        "caption": 'Image 1 - Woman in a purple dress shirt using a laptop'
    })
}}

    Nunjucks macro options

    [object Object]undefined
    [object Object]undefined
    [object Object]

    HTML

    <figure class="ons-figure">
  <div class="
                ons-figure__content
                
                ons-u-mb-l
            ">
    <div class="ons-image">
      <img class="ons-image__img" src="/img/small/woman-in-purple-dress-shirt.jpg"
        alt="Woman in a purple dress shirt using a laptop" />
    </div>
  </div>
  <figcaption class="ons-figure__caption">Image 1 - Woman in a purple dress shirt using a laptop</figcaption>
</figure>

    Help improve this page

    Let us know how we could improve this page, or share your user research findings. Discuss ‘Images’ on GitHub (opens in a new tab) 

    Back to top