Images
Images can be added to pages, but they should not be used just to make a page look interesting or break up large amounts of text.
We do not use images that contain text, unless it is a logo.
Images containing text do not meet accessibility standards. It is better to add text to the page content. Images and banners can be created using HTML which is accessible and resizes on mobile devices. For example the banner on the libraries page.
Most people use a mobile to access plymouth.gov.uk, images can get in the way of content, but also use more data. Not everyone has access to WiFi and some may be on limited data packages.
Websites are a source of carbon emissions and file size of images is a large contributor to this.
On some pages, we may choose for images not to display on mobile. For example, where images might get in the way of content or make the page slow to load
Size and format
Images need to be provided by the service. The Design Studio can help with the sourcing of images.
Images must be good quality and in .jpg format. Logos should be in .png format.
Images must be optimised for the web, to make sure pages load quickly.
Copyright
Make sure that you know where the image comes from, and you have permission to use it. We need to make sure we are not breaching copyright laws.
PCC staff can view the Communications Toolkit guidance on images.
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, unless it is purely decorative images, must have alt text that describes the content of the image and any information it provides.
You do not need to start ‘image of’ or ‘photo of’.
Some images do not need alt text. Use “” if an image is purely decorative and does not contain important content. (If this is the case, consider why the image is being added)
If the image contains a link, the alt text needs to say where it is going.
Web Accessibility Initiative Alt text decision tree
Image naming convention
Make sure the image file name makes sense. Include the type of image it is in the file name. There may be times when we need to track down a specific image.
Separate the words with a hyphen
For example:
disability-confident-employer-logo.jpg
Nielsen Norman Group research on use of images as web content
Videos
Videos must be hosted on YouTube or Vimeo.
We use the embed code from the video player.
Captions must be available on the video. This is so we meet accessibility regulations.
If there are no captions we will link to the video instead.
Captions can be edited on YouTube videos in YouTube Studio. YouTube provides automated captioning. You will still need to check the captions as automated captioning may not get everything right.
Make sure content is not exclusively in the video and provide a text alternative.