Images
Types of image
There are three main types of image:
- informative - which help to explain something visually
- decorative - to improve the look and feel of the page
- functional - for a user action, such as a print icon or 'start' button
How to use images
Use images to inform the user.
Avoid using images for decoration (some exceptions apply).
- informative example: an image showing pothole depth is informative, as it can help explain what a dangerous pothole looks like
- decorative example: an image of children in a classroom on a school term dates page is decorative, as it does not help explain anything
Functional images like buttons and navigation tiles should be added to a page using CMS features, not by inserting an image file.
Do not use images generated by AI.
Adding a description to your image
Add alternative text (alt text) description to your image. This tells people with screen readers what the image shows. It'll also help people find your page through search engine image results.
For example, 'A dangerous pothole with a depth of X centimetres' is good alt text for an informative image.
You don't need to start the alt text with 'Image of...' as screen readers will announce that it's an image before reading out the alt text.
Image practices to avoid
Do not link images, for example, an image of another website to take the user to that site.
Do not publish images containing text (except logos). This can be hard to read and makes the information inaccessible to screen readers and search engines.
Uploading and adding images to a page
Images uploaded to suffolk.gov.uk should be:
- a JPG or PNG file format
- maximum 1200px wide
- less than 1MB file size
Before uploading or adding an image, search the image library before adding a duplicate. If you need a particular image which is not already uploaded, contact the CDT.
