Skip to main content

Alpha This guidance is in development. You can find current content and publishing guidance on GOV.UK.

Skip past section navigation
Images and videos

Formatting images

You can only use images in the body copy of the following content types:

  • news articles
  • speeches
  • case studies
  • fatality notices
  • detailed guides
  • consultations
  • groups
  • publications
  • HTML publications

You will need to choose a lead image for some content types. It will show at the top left-hand side of the page. These types are:

  • news articles
  • speeches
  • fatality notices

You can also add images of a person to ‘People’ pages.

Before you can add images into the content, you’ll need to properly format them for uploading into Whitehall Publisher. How you do this has some differences depending on if the image is:

  • informative or decorative
  • a chart, diagram, infographic or scientific equation

Some processes or rules apply to all types of image, such as:

  • how you name the file
  • copyright standards
  • how you upload images in Whitehall Publisher

Informative or decorative images

Decorative images are generic images which do not give any additional information to the content. For example, an image of laptops in a blog post about technology, or featured content on organisation pages.

Informative images can help users understand the written text in a different way.

For both types of image:

  • avoid using images with text - it makes it harder for some users to understand the image
  • do not use the alt text field
  • use a JPG, PNG or GIF file type
  • make it a minimum size of 960 pixels wide by 640 pixels high at 72 DPI - you can upload larger images and resize after uploading

If you’re using informative images:

  • do not use images alone to provide information - it will exclude users who cannot see or access the image
  • use the caption and credit field to name a person in an image
  • write a description of the image in the body of the content

When you describe the image, describe it as though there is no image on the page if you can. For example, write “the minister gave a speech…”, instead of “an image of the minister giving a speech”.

Images of charts or diagrams

Use svg files for images that contain useful information, for example diagrams, charts or infographics. This is because it scales well, without pixellating, for people who zoom in using magnifying software.

There’s no minimum image size for SVG files.

Using colour

Do not use colour alone to convey information. Some visually impaired users will not be able to see colour differences. Ensure there is a high enough colour contrast ratio between segments, lines, text and background colour.

Read more about using colours in charts on the Government Analysis Function website.

Alt text and descriptions

Do not use the image to convey information without also explaining it in the text of your content.

When you explain it, imagine you’re describing it to someone over the phone. Do not just repeat the headline title.

Avoid describing the chart vaguely or too broadly. For example, it would be too broad to say: “The bar chart shows EU funds by percentage on the vertical axis and EU countries on the horizontal axis”. Explain what is happening in the data and any important trends

Leave the alt text field blank. Instead, add at least one of the following:

  • a description of the chart directly under it
  • a table of the raw data
  • a link to the raw data in an accessible file

If you provide the raw data as a table or in an accessible file, consider if it will be clearer than a description. For example, when you have a chart showing a long time series of data, a description of the trends will be more appropriate than a table.

Chart titles

All charts should have two titles - a headline title and a statistical title. The headline title of the chart should summarise the main message of the chart. This should be followed by a statistical title that describes the data shown.

Example

Note:

Headline title: Oliver stays on top of baby names list

Statistical title: Figure 1: Number of baby boys given the top 10 most popular names, England, 2020

Diagrams

Only use a diagram if it makes the content clearer or summarises a large amount of information.

When you’re creating the diagram, try to:

  • follow normal reading direction - users want to read from left to right
  • avoid overlapping connector lines
  • use simple shapes - and as few different types as possible
  • make it clear where the starting point is for process and flow charts
  • use black and white rather than colour
    Include a detailed explanation of the processes and relationships explained in the diagram in the body text. This is helpful for users who cannot see the diagram.

Infographics

An infographic is an image which usually displays data, graphs, charts or text to explain a complex process or overview of a subject.

Infographics can be hard to make accessible if they’re too complicated. This is because screen magnifier users may need to scroll horizontally and vertically across the image. This may make them hard to understand when not seen all at once. It can also be difficult to describe in text. The image may also become blurred and pixelated when magnified if you’re not using an SVG format.

If you do use an infographic you should provide a plain text version of the content. This should explain everything that is shown in the infographic and be in the body text next to the infographic.

Read more about creating accessible infographics in the infographics guidance on the Government Analysis Function website.

How to create an SVG file

The tool you use to create graphs and charts must have a ‘save as svg’ or ‘export as svg’ option. Changing a bitmap file type into an svg does not make it scalable - it must be done from the source file.

There are several free tools you can use to create svgs. Some examples include:

Your organisation may already be using a paid tool which can create svgs. Some examples include:

  • Adobe Illustrator
  • Affinity Designer
  • InDesign
  • PowerPoint (newer versions only)
  • Sketch

Image file names

You must give all images a meaningful, unique file name before uploading. This helps it to show up in search results. The file name also becomes part of the code you copy into the body content so it will help you to recognise the image. Do not use special characters in the file names.

A good example would be “delegates_at_COP_2022.jpg” for a picture of delegates from the climate change conference.

If the image has a white background

For images with a white background - such as ministers’ portraits - add a light grey overlay to help them stand out from the website background.

Borders

Avoid putting borders around images. The image should go right to the edge of the frame (called ‘full bleed’).

How you attribute your images depends on the copyright standards covering the image.

If possible choose images that are free to use. These will usually be either:

If you want to change the image, such as by cropping it or changing the colours, check that the licence you’re using allows for adaptations or derivatives. For example, some Creative Commons licences have a ‘no derivatives’ (ND) rule.

Content on all government websites will be permanently available on the UK Government Web Archive. If you need to use third party images (not covered by the Open Government Licence), you must buy the right type of licence. This means you must:

  • get worldwide rights
  • get the rights to use the image forever (in perpetuity)
  • get the rights to use the image on anything
  • agree the fee

Image licences must not be:

  • for a limited time period
  • based on page impressions

Do not use embedded images that remain under the control of the supplier.

Using images of people

If you’re using images of people:

  • check with the copyright holder if the people in the image are happy for you to use it
  • get written consent from people if you’re arranging the photography yourself
  • avoid showing identifiable people in connection with things that may cause offence

Attributing images

You need to attribute images covered by a Creative Commons or third party licence. You do not need to attribute crown copyright (Open Government Licence) images.

Add the attribution text to the ‘Caption and credit’ field when uploading an image, or at the bottom of the page where the image appears. You cannot add a credit to featured images or your organisation’s default image.

State if the image cannot be reused for free.

For Creative Commons images, you also need to include:

  • the image creator’s name
  • a link to the original image
  • the name of the specific Creative Commons licence that applies (like Creative Commons BY-NC-ND 3.0)
  • a link to the specific Creative Commons licence
  • details of any changes you’ve made to the image, like if you’ve cropped it or changed the colours
  • the title of the image, if the image has a Creative Commons licence prior to version 4.0

For example:

Note:

[Title of image] (link to the image) by [John Smith on Flickr] (link to the account). Used under Creative Commons BY-NC-ND 3.0. Cropped from original.

Adding the image to your content

To upload the image:

  1. Select ‘Edit draft’ on the content you want to add an image to.
  2. Go to the ‘Images’ tab, select ‘Choose file’ and upload the image you want to use.
  3. Preview your image. You can resize your image by selecting and dragging the frame if it is too large. Select ‘Save and continue’.
  4. Add image details like captions and credits if you need to.
  5. Select ‘Save’ to make sure the image has uploaded correctly.

Once you upload an image, you’ll be given a ‘Markdown code’ that you can copy and paste into the body. Paste it wherever you want the image to appear, and check it’s in the right place using the ‘Preview’ button.