Images
Photography
Aspect ratios
When using photographs we recommend using standard aspect ratios such as 1:1, 4:3, 16:9, and 21:9.
The aspect box component can crop incorrectly-sized images to fit these aspect ratios.
Illustrations
Sometimes it’s better to use an illustration instead of a photograph. For example, when:
- there’s 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 left aligned to the page’s content. The recommended maximum width for an image in article content is 750px.
Data visualisation
Images can be used for charts, maps and infographics. They give a visual representation of numeric data. You can get more guidance on how to create effective and accessible charts to use within the Design System.
Other types of image use
You can also use other types of imagery like logos and icons to support information.
Accessibility
Images must come with text alternatives which describe the information they present. Screen readers will read out alternative text for users with visual impairments. Apart from text labels in a chart, do not use text in an image. Screen readers and automated translators will not be able to read it.
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 may impact how quickly your website or service displays on users’ devices. It can also affect how high the web pages rank in search engines. Image performance 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
- give different sizes of the same image to best suit the screen displaying it
Google provides guidance on how to optimise images.
Feedback, help and support
If you need help or support you can e-mail us at designsystem@gov.scot
There is a problem
Thanks for your feedback