Images

When to use images

In general, public services should not rely on images. You should focus on designing clear, plain English written content.  

Use an image if there’s a user need to better understand written content. For example, how to take a passport photo on GOV.UK.   

Unnecessary images can: 

• harm the usability and accessibility of your service 
• make pages slower to load  
• reduce the sustainability of your service  
• make a service look dated very quickly  

If you need an image, you should:  

• choose the correct image to meet the user need 
• make sure it’s accessible – for example, with alternative text 
• test the impact on page loading and usability 
• take steps to improve performance

Choosing the type of image

Use an image that will meet the user need and improve understanding of the content.  

You’ll need to decide whether to use: 

• photographs – to show real life representation, like a preview of a document 
• charts, maps or infographics – to present data meaningfully 
• illustrations – to show something in a simplified way 

There are also icons to help users interact with components and patterns. 

Finding or creating images 

You should either:  

• create images specifically for your service – this is the best option 
• use a reputable stock image website – you must check the licensing, copyright and attribution requirements for each website and image

Find out how to create effective and accessible charts. 

Designing illustrations  

Illustrations should: 

• use as few visual elements as possible 
• use a consistent style across the service – including colour palette, line widths and border radiuses  
• follow guidance for colour customisation 

Flat, two-dimensional vector illustrations are the best option. They’re simple, easy to understand and can be re-sized without losing quality.  

For example, the add more fields pattern uses two-dimensional vector illustrations to show the screen flow.  

Making images accessible 

To make images accessible, you must:  

• add alternative text (‘alt text’) where needed – follow alt text guidance on the GOV.UK Design System  
• make sure that links that contain icons and images are at least 24px by 24px to meet the Web Content Accessibility Guidelines (WCAG) 2.2 Target Size Success Criterion  

You should avoid using images that contain text. There’s image text guidance on the GOV.UK Design System.  

Images do not replace text. There should be written content with the information a user needs to complete the service, even if they cannot view the image. For example, an image supplements the written rules for taking a passport photo on GOV.UK.

Find out more about how to make images accessible on the W3C website. 

Aspect ratios

Use standard aspect ratios such as 1:1, 4:3, 16:9, and 21:9 for photographs and illustrations.  

You can use the aspect box component to crop images to fit these aspect ratios. 

Improving image performance 

You should test the impact of any images on page loading and usability. 

You can improve image performance by: 

• compressing images to create smaller files 
• using the most appropriate file format, such as SVG for vector illustrations 
• lazy loading images to stop unnecessary downloads
• giving different sizes of the same image to best suit the screen displaying it 

Read Google's guidance on how to optimise images.