Images and videos

Add an image or video to 188体育.

Images

Choosing an image

These formats will always display a lead image at the top left-hand side of the document :

  • news articles
  • speeches
  • fatality notices

News articles automatically use the default image for your organisation as the lead image. You can replace it with the first image you upload.

If you need to use the default image as your lead image and have another image in the body text, you will need to upload your default image first.

When you tag a speaker to a speech, their profile image will appear as the lead image. You cannot select a different lead image.

Using a lead image for a case study is optional. If you use a lead image, you can either select the default image for your organisation or upload a new image to use. If you are uploading multiple images, you should upload the lead image first.

A fatality notice has a default lead image. You cannot select a different lead image.

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 188体育. Only use SVGs for images that contain information like charts and diagrams.
  2. Images for documents need to be a minimum size of 960 pixels wide by 640 pixels high at 72 dpi (dots per inch). You can upload images that are larger and resize them after uploading. For images in other parts of Whitehall, such as organisation pages, images must be 960 pixels wide by 640 pixels high at 72 dpi. SVGs can be any size and do not need resizing before uploading.
  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 鈥榝ull bleed鈥�).

Image file names

You must give 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 Markdown code 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.

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 鈥榮ave as SVG鈥� or 鈥榚xport 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:

  • Gravit Designer

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 鈥楨dit draft鈥� on the document you want to add an image to.

  2. Go to the 鈥業mages鈥� tab, select 鈥楥hoose 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 鈥楽ave and continue鈥�.

  4. Add image details if you need to. Find out when to use alt text, captions and credits in the images chapter of the content planning manual.

  5. Select 鈥楽ave鈥� to make sure the image has uploaded correctly.

Positioning images on a page

You can position images within a document using Markdown.

To add images using Markdown:

  1. Copy the Markdown code shown next to the image including the square brackets. The Markdown code is made up of the image file name and the image format type, for example [Image: larry-the-cat.jpg] is a JPG file named larry-the-cat .

  2. Paste or type the Markdown code in the body copy where you would like it to appear. Check the images are in the right place by using the 鈥楶review鈥� button.

Attributing images

Read the copyright standards in the images chapter of the content planning manual to find out when you need to attribute your image.

Add the attribution text to the 鈥楥aption and credit鈥� field when uploading an image, or at the bottom of the page where the image appears. You cannot currently add a credit to featured images or your organisation鈥檚 default image.

For Creative Commons images, you need to include:

  • the image creator鈥檚 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鈥檝e made to the image, like if you鈥檝e 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:

[Title of image] (link to the image) by [John Smith on Flickr] (link to the account). Used under . Cropped from original.

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 188体育 to explain concepts or processes.

On 188体育, we should be able to explain things clearly and concisely for the general public in words. If it鈥檚 hard to explain clearly, it鈥檚 a sign that the concept or process itself needs simplifying.

We鈥檝e found that videos about concepts or processes often:

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

If you鈥檝e created a marketing or campaign video, it鈥檚 best to publish it on social media channels, then link users to content on 188体育.

Adding videos to Whitehall content

You can either:

Find out how to add videos to content.

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 鈥極pen 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鈥檚 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鈥檒l 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鈥檚 an important handshake between ministers which signals the closing of a deal and the reporter does not say this, you鈥檒l need to describe it.

Example 3:

If you show a user journey of a new service or product, you鈥檒l need to describe the journey so everyone has access to the context.

You must make sure that any important information that affects people鈥檚 understanding of the video is explained verbally, not just through imagery.

Videos with text only

If your video is text-based, you鈥檒l 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 .