Government Digital Service
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
-
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, 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:
- 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
-
Select Edit draft on the document you want to add an image to.
-
Select the Choose File button and select the image you want to use.
-
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.
-
When youve picked an image, another New image box automatically appears so you can add more images.
-
Select Save 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 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.
-
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.
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.