Presenting a good image for your course

Tom Worthington FACS CP HLM

Adjunct Lecturer, Australian National University

For the Wattle Wednesday, Australian National University, Canberra, 29 June 2011

Tom Worthington was awarded a certificate in audio-visual production for training, by the then ACT TAFE in 1990. He decided it was time to apply some of those skills to teaching. Tom discusses some shortcuts to including still and moving images and sound in courses.

Tom Worthington FACS CP HLM

SOCOG Web Page without graphics

Tom Worthington is an independent ICT consultant, an Adjunct Senior Lecturer in the Research School of Computer Science at the ANU and a Visiting Scientist at CSIRO. In 2010 Tom received the ACS Canberra ICT Award for the design of the ANU Green ICT Course. Previously he advised on IT policy at the Department of Defence.

In 1999 Tom was elected a Fellow of the ACS for his contribution to the development of public Internet policy in Australia. He is a past president, Fellow and Honorary Life Member of the ACS, a voting member of the Association for Computing Machinery and a member of the Institute of Electrical and Electronics Engineers.

E-learning Systems Use Web Standards

Martin Dougiamas

Images in Moodle

Tom Worthington Teaching Travel Technology Publications Blogging News FeedSearch

The Moodle Insert image tool supports common web formats: JPG, GIF and PNG:

  1. GIF (Graphic Interchange Format)
  2. PNG (Portable Network Graphics)
  3. JPEG (Joint Photographic Experts Group)

GIF and PNG are lossless compression, indexed color formats. Gif has an 8-bit palette with a maximum of 256 colors, PNG has an 8 to 24-bit palette for "true" colour images. These suit graphics with areas of flat colour, such as logos, icons and line art.

The number of colours used can be reduced to reduce the file size. GIF and PNG are less suited for photographs. The formats allow for part of the image to be transparent, with the background colour to showing through. PNG also has a 16-bit gray-scale palette suited to images such as medical x-rays.

JPEG is a lossy 24-bit format, suited to photographic images and drawings with gradations of colour. The level of compression used for JPEG can be set to reduce the file size.

As not all devices can display images and not all users can see them, any important information conveyed by an image should also be described in an alternative format, such as text, in the web document.

Bit Mapped Images

GIF, PNG and JPEG are all bitmapped (raster) image formats. The images are made of a grid of square single colour pixels. Some technical applications, such as architectural blueprints, require vector graphics, made of lines and geometrical shapes. Scalable Vector Graphics (SVG) was created as a W3C standard to support such applicators, but is not widely implemented.

Image resolution of bit-mapped images are measured in pixels per inch (ppi). Computer monitors typically have a resolution of 72 ppi (the px lenght measure of CSS), or less. Smart phones have an effective resolution much lower than this. Low cost printers have a resolution of 300 to 1,000 ppi.

To reduce the size of files downloaded, images should be provided at the minimum resolution usable. A common mistake is to provide images to suit very high resolution printing at many thousands of pixels per inch, when few users of the web site will have such a printer.


Images can be used as pictorial representations of an objects: pictograms. Some disabilities, such as Aphasia, involve problems reading text and graphics can improve access. Pictograms also are useful for international communication.

Pictograms are commonly used for transport (United States Department of Transportation DOT pictograms) and for the Olympic Games.

Pictograms with hypertext links can be used in web pages as computer icons. For touch screen devices, such as smart-phones, the icons can be made large enough to act as press buttons.

Video and Audio

Animation 'Airport' by Iain Anderson

Moodle supports a wide range of Multimedia plugins. Audio and video files can be simply added to course web sites and Moodle will provide the player controls.

The ANU Digital Lecture Delivery System (DLD) supports (typical file size): MP3 Audio and MP4 Video at "iPod" low resolution and "Computer" high resolutions.

The video provided by the DLD is intended for displaying slides with limited movement, not full motion video. Before including full motion video, consider if it is really needed and how much is needed. Videos of lectures should not be more than 10 to 20 minutes, to keep them interesting. Intersperse "talking heads" with slides.


Low resolution limited colour moving images (animation) with audio can be used to good effect for education. These are technically efficient and also easy understand, as they remove unnecessary detail from the images. An example of animation is the award winning Airport by Iain Anderson (2005), made just using the signs found at airports.

Provide Alternatives for Accessibility

Moodle supports alternative text for images. The key point is to provide information in alternative formats, for people who cannot see, or who have devices which cannot display some formats. In this case provide a text caption for people who can see an image, or a using a device which cannot display an image.

The Web Content Accessibility Guidelines (WCAG), produced by the World Wide Web Consortium (W3C) are a widely accepted guide to web accessibility. The guidelines help with the design and testing of web pages for people who have a disability (such as limited vision), as well as web pages for use on for mobile devices.

Since the SOCOG 2000 Case, web accessibility has been required by Australian law. Australian universities are subject to this legislation and are required to make web pages accessible, wherever possible. It is not lawful to simply wait until a blind student enrols in a course and then look at making the course website accessible: this must be done in advance.

Moodle Book Module

The Moodle Book Module provides a simple implementation of an e-book, with each chapter as a web page. This can be used to consolidate all of the notes for a course. This prevents students being overwhelmed by the volume of material at the start of the course, but still have access to all notes.

The Moodle Book module using web standard formats and can be easily converted to other web based formats, such as IMS Content package, Amazon Kindle Book and ePub eBook.

Different e-book and learning package formats have different limitations. It is likely that still images can be included, but audio and video may not be, either because the formats are not supported, or the files are too large. However, a link can be made to an audio or video file on the web. But remember to include a text description of what the audio or video is about, for those who can't get it (if it is important).

More Information

  1. Online Education With Web Standards, Tablets, eBooks and Smart phones, for the Web Standards Group, Canberra, 8 June 2011.
  2. Web Multimedia, from "Web Technology", notes for the Australian National University course "Networked Information Systems" (COMP2410 / COMP6340), 2009.
  3. Social inclusion and cooperative education with ICT: Social Networking and mobile accessible web design for better learning, for the ACEN Forum, University of Sydney, 20 August 2009
  4. Tom Worthington
  5. This document is available at:

Slides for these notes are also available.

Version 1.1, 30 July 2011)

Creative Commons License
Presenting a good image for your course by Tom Worthington is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.