Using images in content

Check images before publishing

Only use an image if it helps people understand the content or service. Before using an image, read Before you use images in web content.

Use this checklist after you have decided that an image is needed to make sure it is clear, accessible and works well for all users.

Prepare images for the web

These steps help images load quickly and remain clear on all devices.

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 JPG (compress to 50–80% if the image remains clear).
Use PNG only where 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 (alt text or nearby text)
Decorative images are marked as decorative

For guidance on different types of images, go to:

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

Test before publishing

Before publishing, make sure images are clear, accessible and work well on all devices. Images should support the content without slowing it down, disrupting reading, or making information harder to understand.

Mobile device checks

Where 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 by narrowing your desktop browser window or using Microsoft Edge’s device emulator.

Check on a browser window

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

Using Microsoft Edge's device emulator

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

Alternative text checks

Alt text should explain what someone would miss if they could not see the image.

You can 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 for free by contacting ICT.

Automated image checks

Automated tools can identify some 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.