Title of the page

Images can be used to share information, break up content and make the page more visually appealing. Some images give written content more context, and some contain information, like a graph or chart.

Image examples

The same image with an aspect ratio set to 4:3

The alt attribute should be removed — An image in a container with a span of 6 to reduce the image size

How to use images

Images that relate to the content can help a user understand the content more quickly. They can also be used to ‘sell’ an idea. For example, if your content is talking about an impressive business location or an exciting new product, an image can help users visualise the message.

However, try to avoid too many decorative images as this can frustrate users. It will also slow the page load time and increase the page’s carbon footprint.

Align all your images to the same side of the page – avoid alternating images between left and right in a zig-zag pattern.

If your image needs more context you can add more information in the caption. For example, if the image is of an employee or customer, you can add their name and role in the caption.

Images can be added to various different components, including cards, accordions and 50:50s.

Images should be aligned to the left side of the page as standard, with the exception of SDI which should have centre-aligned images. This doesn't include images that sit within other components like cards, accordions or 50:50s.

Adding images in the CMS

At the page, component or container level

There are a few ways you might add an image to a page:

Using an image template
Using a component template that already includes an image component (such as a card template, 50:50 template
Adding an image component to an existing panel or component

If you're adding an image to a panel rather than a component like a card, you'll need to add a container first, and then add the image component to the container. On the SDI website, you don't need to do this.

Once you've added an image component, you'll need to:

Select an existing image, or upload a new one in the same location as the page you're adding it to
Upload most images as a JPEG/JPG. Simple graphic images can be uploaded as a PNG.
Compress your file using a tool like TinyJPG before you upload.
Decide what aspect ratio you want the image to be - you can leave this blank, set an aspect ratio for each display size, or pick on aspect ratio for all displays
Select the ‘Presentation Only’ toggle if the image is decorative only and doesn't require a description by screen readers
Add a caption if the image features something of particular interest like a person, product or place

In the media library

If you've uploaded a new image, you need to go into the media library to check a few settings on the image.

Give the image a sensible name so that other content editors know what the image is, and to help search engines understand it
Add alt text if the image needs it. Find out more about alt text
Use the focal point tool to make sure the image works at different sizes - making sure nothing important is cut off
Check the different aspect ratios of each image - you can adjust which part of the image is show at different ratios, and how zoomed in the image should be.

Image modifier rules

Standard modifiers

Images are usually added to another component, so follow the modifier rules for whichever component the image is in. If the image appears in a panel on its own, here are the modifier guidelines you should follow.

Background: default (white) or ‘background’ (grey)
Grid span: typically 8, but you can use a container with a smaller span if you want to display the image in a smaller size.
Padding: default, unless required to improve layout
Alignment: default

Image size

It doesn't really matter what dimensions the original image is when you upload. Images will automatically expand to fill the container they're in - so if you add one to a text panel with a span of 6, it will span 6 columns. If you add it to a card, it will fit the card size. This keeps image sizes consistent without having to manually resize.

If you need to change the display size of an image you can:

Add it to a container and change the span of the container
Change the aspect ratio - the image will still fit the width of its container, but you can change whether it looks square or horizontal or vertical.

Read our full guidance on using modifiers

Accessibility

Screen readers can’t interpret images and rely on text to read out a description of the image. Users with limited bandwidth may also rely on a text description. These descriptions are known as alt text.

Alt text should be added where an image adds information to a page that would be lost if a user couldn’t see the image. This includes things like infographics, charts or navigation icons. Decorative images usually don’t need alt text, but if the decorative image shows something particularly important or emotive then you should add some descriptive alt text.

If your image contains a complex information like graphics or charts, make sure to follow colour contrast best practise so that users with different forms of colour blindness can still interpret the image accurately.

Evidence and research

Users like the use of images to break content up on a page if the image is relevant to the copy. In testing users commented that they do not like the use of images if they are not relevant.

Adding images in a zig-zag pattern can add visual interest to a long page but research from eye tracking shows that a predictable aligned layout helps a user scan information more efficiently so we advise against a zig-zag layout.

Here's how an image should look as standard

This applies to most of our sites, including Scottish Enterprise and Find Business Support, but not SDI. It's aligned to the left side of the page, with a span of 8 so it doesn't take up too much of the page. We add the image (and any headings or text) into a container and apply the span to the container. This makes sure the content is aligned to the left.

If you're adding an image into a component like a card or accordion, follow the guidelines for that component.

Here's how an image should look on SDI

It aligned to the centre of the page, with a span of 8 so it doesn't take up too much space on the page. We apply the span to the whole panel to make sure it's centred.