We can use images on pages to bring the content to life and add visual impact.
Images should be added using image renditions, so that the image gets resized appropriately according to the device being used to view the page. You should always optimise an image before uploading it.
Don't forget to edit the rendition if the right part of the image isn't showing.
Images alongside text
To add an image to sit alongside text in a page, use the following renditions:
- Page thumbnail (300 x 200)
- Tall (300 x 400)
Using either of the above renditions will ensure that the image fills the screen on a mobile device and the text will wrap above and below the image. You can left-align or right-align the image. Try to avoid centering images inline with text, as it will be hard to read the text.
To use an image across the entire width of a page on the desktop view, you can select the following renditions:
- Content page - full width (870 x 300) for use in standard content pages
- Primary article image (870 x 400) for use in blog pages
Selecting these renditions will ensure that the image is scaled down when viewed on a smaller device.
Images in landing pages (dynamic template)
Use the full-width rendition (1110 x 360) or the carousel image rendition (1920 x 600).
Be sure to add an alt tag to an image for accessibility. Alt tags are read by search engines too, so you can use these to add keywords to help with SEO.