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.
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
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.
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.
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.
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
There is a problem
Thanks for your feedback