Using images in web content

Make sure information about an image can be understood by those who can and cannot see it.

This means you should:

• use images only if there's a real user need
• check images zoom up to 400% without meaning being lost 
• check information in images has good colour contrast
• add a text description for images with critical information
• make sure decorative images are marked 'decorative'

You must judge whether to treat an image as decorative or informative based on your reasons for including it on the page.

Show text as written content, instead of images

Avoid using images of text for both informative and decorative images. The exception is for text in brand logos.

It’s usually unnecessary to use an image to show text. Text in images cannot be adapted by users, read by a screen reader or enlarged on smaller screens without losing quality.  

Give the information as written content instead.

Examples of images of text are images that show:

• the contents of a post from social media
• an excerpt from a document
• a quote
• key facts from a slide presentation

If you choose to use text in an image anyway, put the text in the nearby content so everyone can read it.

It's okay to have an image that just happens to have text if the text is not meant to be the focus of the image.