Styles

Images

Avoid unnecessary decoration. Only use images if there’s a real user need.

Aspect ratio

Photography

The aspect ratio for photographs should be 3:2.

Open this example in a new tab

Illustrations or representative imagery

If your image represents something physical, such as a letter, document or credit card you should use the aspect ratio of that item.

Open this example in a new tab

Alternative text

This guidance is for government teams that build online services. To learn about writing alternative text for website pages on www.gov.uk using the main GOV.UK publishing platform, go to GOV.UK’s ‘Images’ guidance.

Alternative text, or alt text, is read out by screen readers or displayed if an image does not load or if images have been switched off.

All images, except decorative images, must have alt text that:

• tells people what information the image provides
• describes the content and function of the image
• is specific, meaningful and concise

Use normal punctuation, like commas and full stops, so the text is easy to read and understand.

Do not:

• include the name of the photographer or person who created the image
• start with ‘Image of’, ‘Graphic of’ or ‘Photo of’
• repeat information from the page
• include extra information not in the image

Open this example in a new tab

HTML

<img src="larry-the-cat.jpg" alt="Larry the cat, Chief Mouser to the Cabinet Office, sitting on a meeting table wearing a Union Jack bowtie.">

Some images do not need descriptions. Use alt="" if the image is:

• decorative and does not include important content
• an icon that has a text label that the alt text would repeat
• used in a link and the image is not needed to understand the link

Use the Web Accessibility initiative alt decision tree to work out if the image needs alt text.

Avoid images that contain text, especially PNGs and JPGs because the text becomes unreadable when the user zooms in. If the image does contain text, use SVG because it remains readable when the user zooms in. The alt text should be the same as the text displayed in the image.

Help improve this style

To help make sure that this page is useful, relevant and up to date, you can:

• take part in the 'Images' discussion on GitHub and share your research
• propose a change – read more about how to propose changes in GitHub

Need help?

If you’ve got a question about the GOV.UK Design System, contact the team.