Content presentation - Images
Use images if they are useful and relevant. Do not use purely decorative images.
This applies to:
- graphs
- charts
- infographics
- photographs
- illustrations
<figure class="hse-image">
<img class="hse-image__img" src="https://assets.hse.ie/media/images/Hives.width-320.png" alt="A person's knee covered with lumps of different sizes on their skin.">
<figcaption class="hse-image__caption">
Hives are raised, itchy bumps on your skin that appear like a rash.
</figcaption>
</figure>Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Required | Description |
|---|---|---|---|
| Name src | Type string | Required true | Description The source location of the image. |
| Name alt | Type string | Required true | Description The alt text of the image. |
| Name caption | Type string | Required false | Description Optional caption text for the image. |
| Name sizes | Type string | Required false | Description A list of screen sizes for the browser to load the correct image from the srcset images. |
| Name srcset | Type string | Required false | Description A list of image source URLs and their respective sizes. Separate each image with a comma. |
| Name classes | Type string | Required false | Description Classes to add to the image container. |
| Name attributes | Type object | Required false | Description HTML attributes (for example data attributes) to add to the image container. |
{% from 'images/macro.njk' import image %}
{{ image({
"src": "https://assets.hse.ie/media/images/Hives.width-320.png",
"alt": "A person's knee covered with lumps of different sizes on their skin.",
"caption": "Hives are raised, itchy bumps on your skin that appear like a rash."
}) }}When to use images
Informative images that meet real user needs can be very important.
They help users:
- identify health problems
- get the treatment they need
Where the image is not ideal, but we have no other option, ask yourself if including the image is more useful than not having it at all. In these rare cases, a line explaining how to view it better may be helpful in the caption.
For example, “Food pyramid - to enlarge this image on desktop, right-click and select 'open image in a new tab.’ On mobile, pinch to zoom in on the image.”
When not to use images
Having unnecessary or decorative images can frustrate users. Only use an image if it meets a user need.
Do not use images with text embedded in the image. On mobile devices, text embedded in images is usually not big enough to read.
The text cannot be read by:
- search engines
- people using screen readers
How to use images
Images should:
- flow with the text content
- not appear too prominent or isolated
Try to stack images. Gallery views (images that are side by side) can confuse users.
Image formats
Only use these specific image formats:
- JPEG – use for photographic images and for screenshots from videos
- GIF/PNG – use for software screenshots, drawings, illustrations and any non-pictorial graphics
- SVG – use for icons, logos, maps and anything that could or should be scalable
Captions
The image component is made up of 2 elements:
- the image
- a caption underneath the image, in a white box
Write captions in full sentences. They can be 2 or 3 short sentences. Keep in mind how they will look on smaller screen sizes such as a mobile phone.
The caption assumes that the user can either see the image or read the alt-text. Use it to explain what you want users to conclude from it - for example, how serious their symptom is, or what stage their condition has reached.
For example, the alt-text is "Small red spots on white skin". The caption explains that that's how chickenpox starts.
The caption should not be the same as the alt-text.
Accessibility
Do not use images that have words in them, because screen readers will not be able to read the words.
Alternative text (alt-text)
Images must have text alternatives that describe the information or function they represent. They can be up to 140 characters in length. This makes sure that people with disabilities can understand them.
Alt-text is not usually visible, but is:
- read out by screen readers
- displayed if an image does not load
- displayed if images have been switched off
Long descriptions
With complex images, like images of skin symptoms, long descriptions help people who face barriers due to sight loss.
Updated: January 2023