Information

You appear to be using an unsupported browser, and it may not be able to display this site properly. You may wish to upgrade your browser.

Images

Use images to support written content and help users understand information.

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 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:  

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. 

Box shapes representing the four recommended image aspect ratios
Our image 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

Back to top