Image, illustrations and icons

Contents

Images, illustrations and icons are visual elements used to support learning, communication and navigation. While they are often grouped together, they serve different purposes and should be selected based on the needs of the content.

  • Images are photographs or realistic visual representations of people, places, objects or situations. They are used to provide context, demonstrate real-world examples and build credibility.
  • Illustrations are drawn, designed or stylised visuals that simplify concepts, explain ideas or represent situations that may be difficult to photograph. They are useful for explaining processes, abstract concepts or future-state scenarios.
  • Icons are simple graphical symbols used to communicate actions, functions or key information quickly. They support navigation and help users locate, recognise and interpret information efficiently.

Quality visual elements are clear, consistent, accessible and purposeful. They should support learning outcomes rather than act as decoration.

Why is it important?

Visual elements directly influence how effectively learners understand, navigate and engage with content. Well-designed visuals reduce cognitive effort, reinforce key messages and create a more professional learning experience.

Accessible images, illustrations and icons help ensure all users, including people with disability and those using assistive technologies, can understand and interact with content. Visual design also contributes to compliance with accessibility requirements and supports equitable access to learning.

Before using an image it’s important to be aware of its purpose, how it will be accessed, and the meaning in order to make sure that the image is appropriate, adds value and can have a text alternative added if needed. Under whole of government accessibility requirements, all images used to convey information, or context must have a text alternative when using digital devices. Images which are for decoration only need to be marked as decorative.

What are the benefits?

  • Improved understanding and faster comprehension.
  • Reduced cognitive load.
  • Easier navigation through learning materials.
  • Greater confidence and engagement.
  • Improved accessibility for diverse audiences.
  • Enhanced trust in learning products through professional presentation

Suitable for 

 All APS learning designers and developers and digital content creators.

Where can images, illustrations be used?

  • Digital learning products and eLearning modules.
  • Learning management systems (LMS) and websites. 
  • Videos and multimedia learning resources.
  • Presentations and facilitator guides.
  • Job aids and workplace resources. 
  • Communication products that support learning and capability development.

What makes a quality images, illustrations, icon?

An image, illustration or icon quality can refer to the level of accuracy imaging systems capture, process, store, compress, transmit and display of the images. For example, the type of device used to take the photo, from all the way to the file size of where it is uploaded. In the first instance, a quality device is needed to take the image.

 

Element Description

Image
  • Sharp focus. Be clear, sharp and high resolution.
  • Good lighting and contrast
  • Relevant subject matter
  • Realistic and authentic context. Show real-world situations that are relevant to the content.
  • Be appropriately cropped and focused on the key subject.
  • Reflect diversity and inclusion where relevant.
  • Nothing distracting in the background. Does the background need to be blurred or in focus.

Illustration
  • Simplify or explain information that is difficult to describe with text alone.
  • Present concepts, processes or scenarios clearly.
  • Simple and uncluttered design
  • Consistent colours and style. Accessible colour contrast
  • Use a consistent visual style throughout the product.
  • Avoid unnecessary detail that may distract learners.
  • Easy to understand without lengthy explanation. Be easy to interpret at different screen sizes.
  • Support understanding of complex or abstract concepts.

Icons
  • Simple design. High contrast
  • Represent a commonly understood action or concept. Be instantly recognisable. 
  • Consistent icon set and style
  • Be simple and visually distinct.
  • Remain clear at small sizes. How will it print?
  • Be used consistently throughout the product.
  • Be accompanied by a label when meaning may be unclear.
  • Not rely solely on colour to communicate meaning.

Questions to ask before using any visual

  1. Does it have a purpose?
    • Does it help learners understand, navigate or complete a task?
  2. Is it accessible?
    • Can all users, including those using assistive technology, access the information?
  3. Is it clear?
    • Could someone understand it immediately without explanation?
  4. Is it relevant?
    • Does it directly relate to the content?
  5. Is it consistent?
    • Does it match the style, branding and visual language used elsewhere?
  6. Does it add value?
    • If removed, would the learner lose important information or context?

 

Element Best used for

Image

 Showing real people, workplaces, equipment, environments, examples and authentic situations.

Illustration

 Explaining concepts, visualising processes, telling stories, representing abstract ideas and simplifying complex information.

Icons

 Navigation, actions, status indicators, labels, wayfinding and highlighting key information.

Resolution, Pixels and File Size for Images, Illustrations and Icons

Understanding resolution, pixels and file size help ensure visual elements remain clear, load efficiently and provide a good user experience. Resolution determines clarity, pixels determine image dimensions and detail, and file size determines performance. A quality visual balances all three to ensure it is clear, accessible and efficient to use.

 

Element Description What to look for Example

Resolution

Resolution refers to the amount of detail contained in an image. It is usually measured in:

  • PPI (Pixels Per Inch) for digital screens
  • DPI (Dots Per Inch) for printing

Higher resolution generally means more detail and a sharper image. Resolution affects how well an image can be resized without losing quality.
  • Clear and sharp when viewed at the intended size
  • Suitable for the delivery method (screen or print). 
  • No visible blurring or pixelation. Low-resolution visuals may appear blurry, pixelated or distorted.
 A photograph used as a course banner should remain sharp on desktop and mobile devices. If the image becomes blurry when enlarged, the resolution is likely too low.

Pixels

A pixel is the smallest individual element of a digital image. Digital images are made up of thousands or millions of pixels.

Image dimensions are expressed as: Width × Height

For example:

  • 800 × 600 pixels
  • 1920 × 1080 pixels
  • 3840 × 2160 pixels

The more pixels an image contains, the more detail it can display. Larger pixel dimensions allow images to be displayed at larger sizes. Images with too few pixels may become blurry when stretched.
  • Appropriate dimensions for where the image will be used
  • Sufficient detail for viewing on modern screens
  • No stretching beyond the original dimensions
     
 An image that is only 300 × 200 pixels may look acceptable as a small thumbnail but will likely appear pixelated if used as a full-screen banner.

File size

File size refers to how much storage space the image file occupies. Large files load more slowly. Slow-loading pages can negatively affect the user experience. Files that are compressed too heavily may lose visual quality.

It is typically measured in:

  • KB (Kilobytes)
  • MB (Megabytes)

File size is influenced by:

  • Resolution
  • Image dimensions
  • File format
  • Compression level
  • Optimised for web delivery
  • Good visual quality without excessive file size
  • Fast loading on different devices and internet connections
 A 10 MB image may look excellent but can significantly slow down a learning module. A well-optimised version at 500 KB may appear almost identical while loading much faster.

General Practices

Good Practice
  • High resolution images deliver crisp, clear content. The ideal resolution for web is 300 PPI and for print 72 DPI.
  • High resolution and low resolution of the same media file.
  • Use high resolution, consistent visual styles
  • Provide alt text and text alternatives for images
  • Test visuals with users, including those using assistive technology. Accessible to all users. Easy to understand.
  • Ensure sufficient colour contrast and clear icon meaning
  • Ensure high contrast and readability
  • Maintain a consistent style with other images used throughout the learning product.
  • Maintain consistent style and branding. Aligned to the brand or situation.
  • Select high-quality visuals that remain clear across devices and formats.
  • Use simple, recognisable icons and pair them with labels where appropriate. 
  • No pixelation or distortion

 

Practices to avoid
  • Poor quality imaging will give learning experiences a low value and disengage end users. 
  • Decorative images that add no learning value
  • Low contrast or unclear visuals
  • Icons that are ambiguous or culturally biased
  • Lack of accessibility considerations (e.g. no alt text)/ Skipping accessibility and usability testing.
     

Hypothetical example

 

Example

Example 1: Images

A workplace learning module uses high-quality photographs of employees performing real tasks. Participants can easily relate the content to their own work environment, improving engagement and understanding.

Example 2: Illustrations

A learning resource explaining risk management uses illustrations to show the relationship between risks, controls and outcomes. The visual simplifies a complex concept and helps learners understand the process quickly.

Example 3: Icons

An online course uses consistent icons for downloads, activities, resources and assessments. Learners can quickly identify actions and move through the course more efficiently.

Potential issue

A digital learning product uses low-resolution photographs, overly decorative illustrations and icons without labels. Some learners find the content visually confusing, while screen reader users struggle to understand the purpose of key navigation elements. This reduces engagement and creates accessibility barriers.

Better approach

A digital learning product uses high-quality photographs to provide real-world context, illustrations to explain complex concepts, and clearly labelled icons to support navigation. All informative visuals include appropriate alternative text, colour contrast meets accessibility requirements, and visual styles remain consistent throughout the learning experience. This improves comprehension, usability and accessibility for all learners.
L&D Section
Images
L&D Groups
Design and Development
L&D Categories
Learning Design and Administration
Was this page helpful?
Last updated

Links & Downloads

Alt text, captions and titles for images | Style Manual
Images | Style Manual
Digital Preservation training