Using images in content

If you are unsure whether to use an image, start with Before you use images in content 

Use this checklist once you’ve decided an image is needed. 

On this page

• Prepare images for web
• Manual image checks
• Test before publishing
• Automated image checks
• Accessibility standards and resources

Prepare images for the web

Make sure images load quickly and remain clear:

• Resize images to fit the space on the page.
• Do not stretch or distort images.
• Keep file sizes small (ideally under 400 KB per image).
• Save photos and standard images as JPGs (compress to 50 to 80%, if quality allows).
• Use PNG only when transparency, very sharp detail, or text is required.

For detailed guidance, go to Optimise images for web. 

Manual image checks

Before publishing, check that:

• Important information is easy to see and has enough contrast
• Important information is not shown using colour alone
• Image information remains clear when zoomed up to 400%
• Informative images include appropriate text alternatives
• Decorative images are marked as decorative

For detailed on different types of images, go to:

• Using informative images
• Using complex images
• Using decorative images

For guidance on adding images accessibly in different systems (for example, web pages or Word documents), go to How to create accessible content 

Test images

Check images before and after publishing to make sure they are accessible and readable for everyone

Mobile device checks

Whenever possible, view your page on a real mobile device to check that text is readable, images are clear, and nothing is cut off.

If you cannot view it on mobile, do a quick check for web pages by narrowing your browser window or using Microsoft Edge’s device emulator.

Check on a browser window

1. Open the page in Microsoft Edge (if not yet published, open a preview in your website editing tool).
2. Narrow your browser window.
3. Make sure images are clear, readable, and do not need sideways scrolling.

Using Microsoft Edge's device emulator

1. Open the page in Microsoft Edge (if not yet published, open a preview in your website editing tool).
2. Right-click and select 'Inspect' (opens the viewing tool).
3. Click the phone-shaped icon at the top of the panel.
4. Choose a phone (iPhone or Android).
5. Check the page is readable, images fit the screen, and no sideways scrolling is needed.
6. Click the phone icon again to close the panel.

Alternative text checks

Alt text should describe the purpose or content of the image, not what it looks like.

Use a free browser extension to view alt text, such as this Image Alt Text Viewer (Chrome Web Store)

You can also use a screen reader to hear how image text is read aloud. Recommended free screen readers include:

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

NVDA is the most widely used screen reader for Microsoft devices (WebAIM). Council staff can install NVDA using the Software Centre.

Automated image checks

Automated tools can identify some accessibility issues, but they cannot check everything. Always use them alongside manual checks.

Useful tools include:

• WAVE Web Accessibility Evaluation Tool can check multiple parts of your web page. 
• Silktide Accessibility Checker can check multiple parts of your web page and view your content through various disability simulators. 

Accessibility standards and resources

Following this guidance helps more people access council content and supports compliance with UK accessibility regulations, including PSBAR 2018.

For more guidance on using images:

• Content design: planning, writing and managing content: Images (GOV.UK)
• Images (GOV.UK Design System)
• Images Tutorial | Web Accessibility Initiative (WAI) (W3C)
• How to write alt-text for image accessibility (Scope for business)
• Alt Text: What to Write (Nielsen Norman Group)
• Alternative Text (WebAIM)

If system or format limits stop you from following this guidance, contact the Communications and Marketing team before publishing.