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. 

Find out how to create effective and accessible charts. 

Learn how to add a map to your service.

Creating images 

The best option is to create images specifically for your service. Then you can have full control over the copyright and what to include in the image. If you take photos where people are identifiable, you must get their consent. Your organisation may have a template consent form. 

You may struggle to find images of specific places or communities in stock image libraries. You should avoid using generic stock images. Nielsen Norman research has found that users ignore these photos.

Buying, licensing or generating images

If you cannot source original images, you can consider using a stock image library. Only use reputable image libraries that provide information on licencing, copyright and attribution. Images must be appropriate and related to your context. 

You must check the licensing, copyright and attribution requirements for each stock image website and for each image. If your image is inaccurate or misleading, it could damage your service’s reputation.

Do not use AI-generated images for your service. 

AI tools create images by learning from existing images online. These images may be protected by copyright, which means you may not have the right to use them.

AI image tools can also produce images that show bias. They may leave out certain groups of people or show them in a limited way.

AI-generated images are sometimes used in online scams. Use of AI-generated images risks your service looking untrustworthy. 

Designing illustrations  

Illustrations should: 

• use the extended colour palette
• have as few visual elements as possible 
• use a consistent style across the service – including colour palette, line widths and border radiuses  

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.