Avoid unnecessary decoration. Only use images if there’s a real user need.
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, 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.
- 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
<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.
Get in touch
If you’ve got a question, idea or suggestion share it in #govuk-design-system on cross-government Slack (open in app) or email the Design System team on email@example.com