How to publish on GOV.UK

From:
Government Digital Service
Published
23 February 2016
Updated:
27 October 2022, see all updates
  1. Contents

Images and videos

Add an image or video to GOV.UK.

Images

Choosing an image

YouThese canformats addwill imagesalways todisplay a lead image at the lefttop handleft-hand side of:of the document :

  • news articles
  • speeches
  • case studies
  • 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 GOV.UK.

    Only use SVGs for images that contain information like charts and diagrams.

  2. AllImages imagesfor shoulddocuments need to be a minimum size of 960 pixels wide by 640 pixels high at 72 dpi (dots per inch). You can resizeupload images usingthat freeare softwarelarger likeand GIMPresize orthem anafter onlineuploading. photoFor editorimages likein PIXLR.other Smallerparts fileof sizesWhitehall, meansuch thatas pagesorganisation loadpages, faster,images somust reducebe image960 filepixels sizeswide asby much640 aspixels youhigh at 72 dpi. SVGs can withoutbe affectingany quality.

    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 ‘full bleed’).

  5. Before

Image uploadingfile annames

You image,must give itimages a meaningfulmeaningful, unique file name.name before uploading. This helps it to show up in search results. ForThe example,file larry-the-cat.jpgname isalso abecomes goodpart fileof namethe forMarkdown acode portraitso ofit will help you to recognise the Downingimage. StreetDo cat.not Avoiduse meaninglessspecial characters in the file namesnames. likeA IMG00023.jpg.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 ‘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. SelectGo to the ‘Choose‘Images’ File’tab, buttonselect ‘Choose file’ and selectupload the image you want to use.

  3. AddPreview altyour textimage. ifYou youcan needresize to.your Writeimage aby captionselecting onlyand ifdragging you need one. Check the imagesframe chapterif ofit theis contenttoo planninglarge. manualSelect for‘Save guidanceand on this.continue’.

  4. WhenAdd you’veimage pickeddetails anif image,you anotherneed ‘Newto. image’Find boxout automaticallywhen appearsto souse youalt cantext, addcaptions moreand images.credits.

  5. Select ‘Save’ to make sure the imagesimage havehas uploaded correctly.

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

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

To add images using Markdown:

  1. TypeCopy !!the andMarkdown thecode image’sshown numbernext atto the pointimage inincluding the textsquare wherebrackets. you’dThe likeMarkdown itcode tois appear,made withup anof empty line space above and below. In news stories, the first image (!!1)file willname beand the lead image byformat defaulttype, sofor youexample do[Image: notlarry-the-cat.jpg] needis toa placeJPG itfile innamed yourlarry-the-cat text (if you do, it will not appear). The subsequent images can be positioned using !!2, !!3, and so on..

  2. SavePaste or type the documentMarkdown andcode yourin imagesthe willbody becopy placedwhere inyou thewould textlike automatically.

  3. it to appear. 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.

TheAdd the attribution text shouldto appearthe in‘Caption theand metadata,credit’ belowfield thewhen imageuploading an image, or at the bottom of the page where the image appears. NoteYou you cannot currently add attributiona textcredit to organisationfeatured pages.images or your organisation’s default image.

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.

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