GovWire

Images and videos

Government Digital Service

August 30
12:20 2022

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 make images accessible and check the copyright standards in the Images chapter of the content planning manual.

Formatting an image

  1. You can upload jpg, png, svg and gif files to GOV.UK.

  2. 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.

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

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

  5. Before uploading an image, give it a meaningful file name. This helps it to show up in search results. For example, larry-the-cat.jpg is a good file name for a portrait of the Downing Street cat. Avoid meaningless file names like IMG00023.jpg.

Creating an SVG file

Use the SVG (scalable vector graphic) format to publish images that contain useful information, for example diagrams, charts or infographics. The SVG format scales well, without pixellating, for people who zoom in using magnifying software.

To create an SVG, 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

Uploading an image

  1. Select Edit draft on the document you want to add an image to.

  2. Select the Choose File button and select the image you want to use.

  3. Add alt text if you need to. Write a caption only if you need one. Check the images chapter of the content planning manual for guidance on this.

  4. When youve picked an image, another New image box automatically appears so you can add more images.

  5. Select Save to make sure the images have uploaded correctly.

  6. To go back to the document, select Edit draft.

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

  8. 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.

  1. Type !! and the images number at the point in the text where youd like it to appear, with an empty line space above and below. In news stories, the first image (!!1) will be the lead image by default 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, and so on.

  2. Save the document and your images will be placed in the text automatically.

  3. Check the images are in the right place by using the Preview button.

  4. 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 copyright standards in the Images chapter of the content planning manual to find out when to 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 persons 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.

For more on this, see the section on graphs, charts, diagrams and infographics in the Images chapter of the content planning manual.

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 its hard to explain clearly, its a sign that the concept or process itself needs simplifying.

Weve found that videos about concepts or processes often:

  • duplicate written content, so they add to a users 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 youre thinking about using video, check if you can address the problem or issue with words first. Its easier and quicker for users to find the information in text rather than in video.

If youve created a marketing or campaign video, its 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. Th

Related Articles

Comments

  1. We don't have any comments for this article yet. Why not join in and start a discussion.

Write a Comment

Your name:
Your email:
Comments:

Post my comment

Recent Comments

Follow Us on Twitter

Share This


Enjoyed this? Why not share it with others if you've found it useful by using one of the tools below: