Images

Only use an image if there's a real user need for it, where it would help the user understand the written content. For example, images that illustrate the differences between types of speed bumps or show the different CAZ road signs you can find around Bristol.

Do not use images that have words in them, screen readers will not be able to read the words. If the image must contain text, repeat the same words in the alt or paragraph text.

Images must be good quality so they're easy to see and understand, but avoid using unnecessarily large images. Use the smallest image size you can. This will minimise load times and help reduce our carbon footprint. A maximum width of 1500px is fine for most images. You can consider a width of 2000px for maps and diagrams.

Alt text

Information contained in an image is only available to people who can see it. If you do use an image, it must have alternative text (alt text).

Alt text describes the information in the image. It's read out by screen readers or displayed on the page if the image does not load.

• Use alt text to provide the relevant information from the image to the user, imagine being on a phone call and describing the image.
• Front-load alt text, so the most important information is at the beginning.
• Do not say 'image of', the screen reader will tell users it's an image.
• Only include information that's necessary for understanding.
• Do not repeat alt text across images, say what's different about them.

Captions

Only use a caption if it helps user understanding. For example, to explain what you want users to conclude from the image or to mark an image that's described in the main text.

Captions should:

• be written as a full sentence with a full stop
• be concise, ideally one sentence
• not duplicate alt text
• go underneath the image

Decorative images

Decorative images are images that add no meaning to the page and should not be used. Unnecessary images can frustrate users, especially on information pages, transactional journeys or links.

If there's a valid reason to use a decorative image, it should have an empty alt attribute (alt="").