Call us on: +44 (0)1271 337 110

/Phil Eagles The importance of image optimisation in eLearning design

Image optimisation is often an afterthought when you are knee deep in a project, but it’s one of those things which is vital to the final design of an eLearning solution and is easy to do. We always aim to ensure our eLearning modules are user friendly and optimised to the highest quality, whilst remaining fast to load, removing any waiting time for the user.

The benefits of image optimisation are:

  • Reduction in file size
  • Faster loading courses
  • Clearer images

Below, I have optimised two types of images, one graphical and one photographic.

The general rule of thumb to note is to use PNGs for graphics and JPEGs for photographs. Images that require transparency will have to be saved as a PNG or GIF, although I wouldn’t recommend a GIF due to the limit of 256 colours.

Here are two example images:

Imageoptimisation1 Imageoptimisation2

PNG    1600x1200    3.12MB               JPEG    1600x1200    1.01MB 

One of the best ways to optimise an image is to use Photoshop. Simply go to: File > Save for Web.

PNGs cannot be optimised due to their lossless format, however removing transparency will reduce the file size down to 2.26MB (31% reduction).

With JPEGs you have multiple options to reduce file size. Under the file type dropdown list there is a quality dropdown. This allows you to select a range of predefined quality settings from Low to Maximum. 

Imageoptimisation3

This table shows the file size reduction.

Quality

File size

Reduction

Low

98.52K

164%

Medium

163.4K

144%

High

338.7K

99%

Very High

579.4K

54%

Maximum

982.1K

2%

Original

1.01MB

0%

Photoshop has a very handy previewing window so you can see how much the image quality will deteriorate with each quality setting. I tend to find that the difference between Maximum and High is negligible, whilst the difference between High and Medium or Low is very noticeable. This is obviously dependant on the image but as rule of thumb it’s quite reliable.

Note how the quality of the sun has deteriorated dramatically between the original (top picture) and the Low setting (bottom picture).

Imageoptimisation4

Whilst comparing the High setting (below) with the original the deterioration is minimal.

Imageoptimisation5

To further optimise file sizes I highly recommend resizing the image to fit the area rather than scaling the image down.

For example, if the stage size of the project is 800x600 and the image I want to use is 1600x1200, the quickest way to make the image fit would be to scale it down 50% (within your authoring tool) to make it match the stage size. This is fine in most cases but to fully optimise your course I would recommend resizing the image first and then importing it into the eLearning.

Using the example image, by resizing it to 800x600 and optimising the quality to High this brings the file size down to 105.3K from 1.01MB - a massive reduction of 162%!

The file saving may sound quite minor, but if you imagine the average course has 20 pages and each page typically has at least 1 image this amounts to a large saving overall. Which means a faster loading, more mobile friendly course.

Phil Eagles

Phil Eagles, Senior eLearning Developer, Bray Leino Learning

In my series of blogs I’ll talk about the components of eLearning design and development.

Copyright © 2017 Bray Leino Learning


Tagged in:

Other posts you may be interested in