Images can help users if they are clear and simple. Make sure everyone can access the information that images convey.
Add images only if they help the user
Use images if they help users complete their task with your service or product. Images can make it easier for some people to understand information.
Types of images include:
- photographs and decorative images
- charts, graphs and maps
You must get permission (a licence) to use copyright material. This includes images and text.
Some images are available under an open access licence, such as Creative Commons. Alt text is also licensed under copyright.
Read the government copyright rules in the Australian Government intellectual property manual.
Choose diverse images that are clear and simple
Choose images that reflect and support the diversity of Australia’s peoples and cultures, especially if you are using images of people.
Keep images simple and use them to support information in the text.
Images must be:
- easy to understand
- from a credible source
- consistent in design and style across the content.
Use the same font and typeface, line thickness and colour scheme in all images of the same type.
Include decorative images only if they are relevant to the content
Decorative images, such as photographs, can show an idea and make content more visually attractive.
Don’t use images to fill in space. Decorative images must still be relevant. Use images that relate directly to the content.
People will identify and dismiss stock images that don’t seem genuine.
Use alt text, captions and titles to explain images
Follow the guidance on adding alt text, captions and titles.
Add alt text to all images. Some complex images will also need an extended description (sometimes called a ‘long description’).
Include captions for all images that are not decorative. Add titles to help users scan content.
- I can understand any information contained in an image.
- I can easily control how I see and hear distinctions if colour or sound convey meaning.
- Include images on a page only if they meet a real user need.
- Understand the purpose of the image to write alt text.
- Use real text rather than images of text whenever technically possible. (Logos can be an exception.)
- Make sure that colour is not the only visual means of conveying information in graphs and diagrams. Text labels and patterns can supplement the use of colour. Make sure the contrast is sufficient for all users.
Web Content Accessibility Guidelines success criteria:
Set the correct resolution and file type
Image resolution must be appropriate for the content.
Don’t embed images with a large file size into content that you will publish online, such as PDFs or webpages. Optimise and compress all image files so they make it quicker for the user to access the information.
Design for mobile devices first. An image will scale to the device people view it on. Check that it’s easy to read on a mobile phone screen and a desktop.
There are many file types for images. Seek specialist advice to optimise an image file as a vector or raster file format.
Use graphs, charts and maps if they explain complex information
Use graphs, charts and maps for information that is too detailed for the text. Don’t use them if another format meets the user need – such as a list, table or tool.
Graphs and charts display data, making it easier to understand. They are good for showing:
- trends – such as change over time
- statistical distributions and patterns
- simple comparisons – such as totals for different categories or different rates of change
- processes and relationships – such as an organisational structure or a workflow chart.
To make it easier for people to use line graphs and bar charts:
- Don’t add borders or background tints.
- Use gridlines only where they help people read the data.
- Use ‘tick marks’ on the x- and y-axes to show the scale of data intervals at a glance. Avoid more than 10 tick marks on the y-axis.
- Scale the y-axis to be consistent across the viewport or page.
- Keep it simple (for example, include no more than 3 or 4 data series on a line graph).
- Don’t use colour as the only source of meaning. Try adding dots and dashes to lines and cross hatching to areas.
Add legends and units of measurement to complex images
All graphs, charts and maps should have a legend that tells people the meaning of lines, colours and symbols.
Make legends consistent in a webpage or group of webpages dealing with the same topic. Place the legend in the same position (for example, bottom centre, top left or to the right).
Use the same font and typeface, and colours and symbols for the same types of information.
Maps must also have a scale bar and an arrow to show which way is north.
Include all units of measurement. This helps people understand what the numbers mean.
- Label the x- and y-axes, as well as legends, titles and captions as relevant.
- Use appropriate units (for example, millions of dollars for a company balance sheet but thousands of dollars for a household budget).
- Use the appropriate number of decimal places on labels (for example, $1,000 – not $1,000.00 – for a scale of zero to $10,000).
Refer to informational images in the text
Refer to complex images in the body of the text. It helps people relate the discussion in the text to the information displayed in the image.
Place the image close to where you mention it in the text. For example, a graph must be on the same page and after the paragraph that refers to it.
Don’t repeat the whole caption of the image in the text. Instead, use a locator number to refer to it, for example ‘Figure 1’.
Don’t refer to ‘the photograph on the left’. This sensory language is not accessible for some users.
You don’t need to refer to decorative images and illustrations in the text unless they are part of the discussion.
Figure 6 shows an example of good ergonomic posture.
The photograph of an ideal workstation set-up
(see left) shows an example of good ergonomic posture.
Ensure your text comments on or interprets the image, rather than repeating the text or data in it.
European Union expenditure more than quadrupled from 2016 to 2018
Figure 7 shows European Union expenditure increased from US$9 million in 2016 to about US$40 million in 2018.
Check any details that feature in both the text and an image. For example, the text might quote numbers from a graph. It is easy to make a last-minute change to one and forget to correct the other.
Avoid referring to a page number in the text because page numbers can change during the publishing process.
Follow the correct order for image notes
Image notes appear below an image. Notes can apply to the whole image or to one element of the image.
List notes in the following order:
- notes to superscript locators (such as a superscript ‘#’, ‘a’ or ‘1’)
- general note to the image
- source of data (use the appropriate form for author–date or documentary–note).
Don’t include this information in the caption or in ordinary footnotes or endnotes.
Align notes to the left. They should not extend beyond the edges of the image.
The digital edition includes information on when and how to use images. It focuses on the digital environment and covers accessibility and best practice. It is supported with new content on alt text, captions and titles.
The sixth edition had extensive technical information on images, or ‘illustrations’, largely focused on print publishing. Relevant chapters were in Part 3, which was not in scope for the Live release of the digital edition.
The Content Guide had guidance on how to make images accessible, and brief information on the use of images and optimising them for search.
About this page
Bigwood S and Spore M (2005) Designing persuasive tables and charts, Plain Figures, accessed 9 October 2019.
Lynch P and Horton S (2016) Web style guide: foundations of user experience design, 4th edn, Yale University Press, London.
W3C (World Wide Web Consortium) (2016) ‘Text alternatives: understanding Guideline 1.1’, Understanding WCAG 2.0: A guide to understanding and implementing WCAG 2.0, W3C website, accessed 9 October 2019.
Whitbread D (2009) The design manual, Revised and expanded edn, UNSW Press, Sydney.
Wolfe R (2014) Data visualisation: a practical guide to producing effective visualisations for research communication, London School of Hygiene & Tropical Medicine, accessed 8 October 2019.
Wong DM (2013) The Wall Street Journal guide to information graphics: the dos and don’ts of presenting data, facts, and figures, Norton Agency Titles, New York.
This page was updated Monday 30 November 2020.