Using images in content

Checklist for using images

If you work for the council, first discuss using images in content with the communications team.

You need to do manual and automatic checks to make sure images you use are accessible.

On this page

Before you use an image 

Before you use an image in online content, ask yourself if:

  • you have evidence of a real user need
  • the image helps users understand information in a different way
  • the images don't repeat information unnecessarily
  • you have the right to use the image (if copyrighted)
  • you have full written permission to use photos of people (and it has not expired or been withdrawn)
  • you can make critical information in images accessible to people who cannot see it
  • decorative images are truly necessary

Learn why it's important to consider when to use images in online content.

Manual image checks

Make critical image information available to everyone

Before you publish content with images, make sure any critical information in them:

You must also make sure you mark decorative images correctly.

Optimise images for web

Make sure images load quickly for users on on mobile or slow devices by doing the following: 

  • Resize images so they’re no larger than they need to be (based on how big they’ll appear on desktop)
  • Make sure no image, including large or high quality images, has a file size larger than 400KB.
  • Save photos and most images as JPGs
  • Compress JPGs to between 50% to 80% to reduce file size without losing noticeable quality.
  • Save images requiring transparency or sharp detail and text, like banners and screenshots as PNGs.
  • PNGs do not have adjustable quality settings, so use them only if you need to.

Read our detailed guidance on How to optimise images for web. 

Publishing images in different content systems

For specific guidance on how to publish images using different content systems, like on web pages or in Word documents, go to How to create accessible content 

Automated image checks

Each page in this guide suggests free tools you can use to help you check your images.

Do not rely on automated checkers to tell you your page is accessible. They can't find all issues. You must do manual checks too. 

General automated checkers

Test for mobile devices

Be sure to check how your images appear to users on smaller screens, like a mobile or tablet device.

A quick way to check this is to resize your browser window on your desktop to as narrow as it will go. This will roughly simulate how mobile devices view your web page information.  

Test with a screen reader

We also recommend you learn how to use a screen reader to test how alternative text reads for your images.

The most popular free ones are:

  • NVDA for Microsoft devices
  • TalkBack (built in to Android phones)
  • VoiceOver (built in to Mac and iPhone devices) 

Microsoft has its own built in screen reader called Narrator, but we recommend you install NVDA screen reader for testing instead.

NVDA is a full screen reader and the most used screen reader for Microsoft devices (WebAIM).  

If you work for the council, download NVDA for free through the Software Centre on your Microsoft device.

Still need help 

If you have a question that's not covered in this guidance, contact the communications team.

Related resources

Guidance on image accessibility

Web Content Accessibility Guidelines related to images