Skip to main content
Australian Government Coat of Arms

Style Manual

Images

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
  • diagrams
  • drawings
  • icons.
Copyright requirements

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:

  • accessible
  • easy to understand
  • relevant
  • uncluttered
  • 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.

Accessibility requirements

Include images on a page only if they meet a real user need. Prepare alt text for images.

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.

WCAG quick reference:

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.

Like this

Figure 6 shows an example of good ergonomic posture.

Not this

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.

Like this

European Union expenditure more than quadrupled from 2016 to 2018 (Figure 7).

Not this

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.

Print considerations

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:

  1. abbreviations
  2. notes to superscript locators (such as a superscript ‘#’, ‘a’ or ‘1’)
  3. general note to the image
  4. 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.

Release notes

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

References

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 21 September 2020.

Help us improve the Style Manual

Did you find this page useful?