Image paragraph

Format
Always use .jpg image format for photographs because of better compression and smaller file size.

For cutout images (where the background has been cut off), illustrations, graphs and other graphics .png format is better due to better quality.

Image 1 (jpg, png)
Mandatory.

Image 2 (jpg, png)
Optional.

Alternative text
Mandatory.

Use ALT text that describes what is in the picture. ALT text is assigned once to an image (reused in all instances where the same image is used) and won’t display on the front end unless the image can’t be loaded for some reason (e.g. if the user has turned off the loading of images in the browser settings). ALT text is primarily for users with disabilities using screen readers to engage with the page content.

Caption
Optional.

Use caption only if it’s mandatory to explain the image. Don’t write a caption if you only use an image for impact.

Decorative
Use the decorative option to hide the images from screen readers. Decorative images don’t add information to the content of a page. For example, the information provided by the image might already be given using adjacent text, or the image might be included only to make the website more visually attractive.

Modal pop-up viewer
This option allows the user to enlarge image(s) into a modal pop-up viewer.

Note
See the ‘publishing and managing pages’ section for a full-width page hero image.

Collage module

Use the collage module when you have two images with the same purpose. These images will stack on top of each other on mobile, keeping both images visible.

This module is specific to a page. It will be created and edited via the page template.

1. Navigate to Manage → Content → Add content → [Content type] → Image content

2. Required
   2.1 Image 1: Add by clicking ‘Select images’ and remove by clicking ‘Remove’.
   2.2 Alternative text: Click ‘Edit’ to see and edit the ALT text. IMPORTANT NOTE! Changing ALT text will change centrally throughout the site. For more information, see the ‘Publishing and managing media’ section.
   2.3 Caption: Edit by writing into the text field.

3. Optional
   3.1 Image 2: Add by clicking ‘Add image content block’ and remove by clicking ‘Remove’.

4. When ready with the page, save it to display the modules.

Note

For publishing a full-width page hero image, see the ‘publishing and managing pages’ section.