Images and videos
Add an image or video to GOV.UK.
Images
Choosing an image
You can add images to the left hand side of:
- news articles
- speeches
- case studies
- fatality notices
You can add images to the body copy of:
- news articles
- speeches
- case studies
- fatality notices
- detailed guides
- consultations
- groups
- publications
- HTML publications
Find out how to choose an image and check the copyright standards for GOV.UK.
Formatting an image
-
You can upload jpg, png, svg and gif files to GOV.UK.
-
All images should be 960 pixels wide by 640 pixels high at 72 dpi (dots per inch). You can resize images using free software like GIMP or an online photo editor like PIXLR. Smaller file sizes mean that pages load faster, so reduce image file sizes as much as you can without affecting quality.
-
For images with a white background – such as ministers’ portraits – add a light grey overlay to help them stand out from the website background.
-
Avoid putting borders around images: the image should go right to the edge of the frame (called ‘full bleed’).
-
Before uploading an image, give it a meaningful file name. This helps it to show up in search results. For example, jeremy-hunt-health-secretary.jpg is a good file name for a portrait of Jeremy Hunt, the Secretary of State for Health. Avoid meaningless file names like IMG00023.jpg.
Uploading an image
-
Select ‘Edit draft’ on the document you want to add an image to.
-
Click the ‘Choose File’ button and select the image you want to use.
-
Describe your image in the body text, and leave the ‘Alt text’ field blank. Only write a caption if you need one.
-
When you’ve picked an image, another ‘New image’ box automatically appears so you can add more images.
-
Click ‘Save and continue editing’ to make sure the images have uploaded correctly.
-
All the images will now be assigned numbers and a Markdown code to use - the first is !!1, the second is !!2 and so on. This code can be used to make each image appear within your page.
-
A pink error message will appear if the image is the wrong size or type.
Positioning images on a page
You can position images within a document using Markdown.
-
Type !! and the image’s number at the point in the text where you’d like it to appear, with an empty line space above and below. In news stories, the first image (!!1) will appear in the left column of the news page, so you do not need to place it in your text (if you do, it will not appear). The subsequent images can be positioned using !!2, !!3 etc.
-
Save the document and your images will be placed in the text automatically.
-
Check the images are in the right place by using the ‘Preview’ button.
-
If you see a box with a cross in it, then your image is being virus checked, but it has uploaded correctly.
Attributing images
Read the image copyright standards on when you should attribute your image.
The attribution text should appear in the metadata, below the image or at the bottom of the page where the image appears. Note you cannot currently add attribution text to organisation pages.
For Creative Commons images, link to the original photo with the person’s name and link to this licence with the words ‘Creative Commons’. Like this:
(Photo above by John Smith on Flickr. Used under Creative Commons).
Publishing accessible diagrams, charts and infographics
Use the SVG (scalable vector graphic) format to publish images which contain useful information, for example diagrams, charts or infographics. The SVG format scales well for people who zoom in using magnifying software, without pixellating. You can use software like Inkscape to create SVGs.
See guidance on when to use tables and how to make them accessible.
Videos
We usually do not recommend using videos or animations on GOV.UK to explain concepts or processes.
On GOV.UK, we should be able to explain things clearly and concisely for the general public in words. If it’s hard to explain clearly, it’s a sign that the concept or process itself needs simplifying.
We’ve found that videos about concepts or processes often:
- duplicate written content, so they add to a user’s cognitive load
- make it harder for users to scan for the information they need
- do not work for less visual concepts - such as tax
- are watched by a small proportion of users
- often have calls-to-action that link users back to the page the video is on, creating a circular user journey
Videos also:
- take longer to load than text on slow internet connections
- use more data, which is especially an issue for users on mobile phones
- are expensive and slow to produce
- are less search-friendly than text
- are harder to update, so they can become out-of-date and inaccurate quickly
If you’re thinking about using video, check if you can address the problem or issue with words first. It’s easier and quicker for users to find the information in text rather than in video.
If you’ve created a marketing or campaign video, it’s best to publish it on social media channels, then link users to content on GOV.UK.
Publishing videos in Whitehall
You can only use YouTube videos on GOV.UK pages. Embed the video in the page using video markdown.
Making videos accessible
Video titles
Make sure the video title describes the topic or purpose. The title is used for the page title within the iframe and for a heading which is visible when a video cannot load.
Closed captions and transcripts
Not all users will have access to audio. To make sure videos are accessible, add closed captions and transcripts so users accessing the video without audio can read all of the content.
You can add or edit captions in your YouTube videos in Youtube Studio. YouTube will provide automated captioning. Do not rely on automated captioning to get everything right.
Make sure you select the correct language, especially if your default language is English but the video is in another language.
Go through the automated captioning and check the following:
- captioning is in sync with the person speaking
- there are no spelling mistakes
- it has captured the correct words, paying special attention to uncommon words or phrases
As well as dialogue, captions should identify who is speaking and include non-speech information conveyed through sound, including meaningful sound effects.
If the video is hosted on a site which requires the caption in a .srt, .vtt, or, .sbv file, you can download the caption file in YouTube.
Once you have completed the closed captioning, a transcript will be added to your video. You can access the transcript by selecting the 3 dots under the video and choosing ‘Open transcript’.
If your video is hosted outside of YouTube, make sure you provide the transcript in HTML. Although a transcript is not necessary for WCAG AA, it’s good practice to provide one.
Audio description and transcript
Not all users will be able to see the visuals in your video. If your video has visuals which are important in understanding the context, you’ll need to describe this verbally.
Example 1:
If you are showing a diagram which is not explained verbally in the video, you will have to describe the diagram. Without this information, the video would make little sense to visually impaired users. You will also need to make sure this is captured in the transcript.
Example 2:
At the end of a press conference, if there’s an important handshake between ministers which signals the closing of a deal and the reporter does not say this, you’ll need to describe it.
Example 3:
If you show a user journey of a new service or product, you’ll need to describe the journey so everyone has access to the context.
You must make sure that any important information that affects people’s understanding of the video is explained verbally, not just through imagery.
Videos with text only
If your video is text-based, you’ll need to provide an alternative. You can add a voice-over or transcript. This will help users who may be unable to see the video or have issues with understanding content or language.
Flashing images
You should not use flashing images in videos as they can trigger a seizure.
Flashing refers to any large and bright content that flashes more than 3 times in one second. Users will not be able to switch off the flashing before it can trigger a seizure.
Background audio
When your video has mainly speech in the foreground, make sure you have either no or low background audio.