Images

We use images where content may benefit from a supporting example to clarify information.

Photography

Aspect ratios

When using photographs we recommend using standard aspect ratios such as 1:1, 4:3, 3:2 and 16:9

Box shapes representing the four recommended image aspect ratios
Our image aspect ratios

Illustrations

Preference for illustration over photography may occur when:

  • there is no suitable photography for content
  • a photograph may be too complex
  • visualising data

Using images

Images in article content

Article templates allow images that are aligned left in the page. The recommended width for an image in article content is 750px.

An image spans over eight columns on the page layout and is left-aligned.
Column positioning for images in an article page

Images in category headers

Category headers allow images that are aligned right in the page. The recommended width for an image in a category header is 358px.

An image spans over four columns on the category header and is right-aligned.
Column positioning for images in an category header component

Informational images

Other types of imagery can be considered such as logos, icons and diagrams to support information.

Accessibility

Images must always be supported with text alternatives which are descriptive of the information they present. Alternative text is read out by screen readers for users with visual impairments and where an image does not load. Text should never be included as part of the image as this will not be read out by screen readers or translated by automated translators.

W3C gives guidance on how to make images accessible.

Performance

Images often make up a significant part of the file size of a web page. This factor may impact how quickly your web site or service displays on users’ devices. It can also affect how high the web pages rank in search engines. Performance of your images may improve if you:

  • compress images to create smaller sized files
  • use the most appropriate file format for the image such as SVG for illustrations
  • lazy load images to stop unnecessary downloads
  • provide different sizes of the same image to best suit the viewport where it is being displayed

Google provides guidance on how to optimise images.

Feedback, help or support

If you need any help or want to give any feedback you can e-mail us at: designsystem@gov.scot

Back to top