Images and videos
Add an image or video to GOV.UK.
Choosing an image
You can add images to the left hand side of:
- news articles
- case studies
- fatality notices
You can add images to the body copy of:
- news articles
- case studies
- fatality notices
- detailed guides
- 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.
Add ‘Alt text’ and, if you want, a caption.
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.
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.
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
- take much longer to load than text on slow internet connections
- are expensive and slow to produce
- are hard to update, so they become out-of-date and inaccurate quickly
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
To make sure videos are accessible, add closed captions and transcripts so that users accessing the video without audio can read all of the content.
You can add or edit captions in your YouTube videos in Video Manager. Captions should always be in sync with the person speaking so things do not get confusing. Do not rely on automated captioning to get the timing correct.
You must make sure that any important information that affects people’s understanding of the video is explained verbally, not just through imagery.
There’s a video of someone delivering a speech in front of the Bank of England, which is important to the meaning of the speech. The audio should convey this information.
There’s a video that uses a diagram to explain how something works. You’ll need to make sure the process is also explained in the audio.