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.

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.

Alternative text

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 on the page
Open this alt text – images 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 page

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

Need help?

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