GovWire

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 GOV.UK. 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 full 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 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:

• diagrams.net
• draw.io
• Figma
• Inkscape
• 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 Edit draft on the document you want to add an image to.

2. Go to the Images tab, select Choose 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 Save 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 Save 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 Preview 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 Caption 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 organisations default image.

For Creative Commons images, you need to include:

• the image creators 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 youve made to the image, like if youve 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 Creative Commons BY-NC-ND 3.0. 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.