How to Optimize Your Graphics for eLearning

What does it mean to “optimize” graphics?  It means to change the size of a graphic, to reduce it in visual and/or file size. You can do this by changing the resolution (the amount of pixels in an image), by changing the actual size of the image, or by changing the file type. It is a common practice in the web industry to optimize all photos and graphics for websites. The same principles apply to eLearning.

A stock photograph downloaded from the web can be up to 2500px wide by 1875px high. An image this size can have a file size of 8MB or higher. Simply by re-sizing the image to 500x375px you can reduce your  file size to less than 400Kb. Multiply this by several images and this makes a huge difference in the size of your project .

Why should you optimize your graphics for eLearning projects?

  • Quicker publishing and previewing during development
  • Files load more quickly for the end-user
  • Saves disk space
  • Reduces bandwidth consumption (which means lower bandwidth cost)
  • Good business practice
  • Positive user experience

 What can you do to optimize your graphics for eLearning?

  • Crop them to remove unnecessary excess
  • Strip/remove the meta data (information like date, time, GPS coordinates, etc.)
  • Use proper image formats (see table below)
  • Do not use graphic text (photos of text)

Note: Resizing an image once it’s imported into PowerPoint, Articulate or Captivate does not change the actual file size.

Which image formats should you use in eLearning?

File Type Description eLearning Use
.JPEG
  • Supports RGB colors
  • Typically used for photography
  •  Photos
.GIF
  • Supports up to 256 colors (index color)
  • Supports transparency (1 color in the image can be fully transparent)
  • Does not support semi-transparency.
  • Supports simple animation
  • Simple animation
  • Graphs, charts, diagrams
  • Small images with text
  • Buttons and icons
  • Logos
.PNG
  • Supports multi-transparency
  • Supports both RGB and index colors
  • Does not support simple animation
  • A .PNG image can be compressed to a smaller file size than the same image as a .GIF can.
  • Graphs, charts, diagrams
  • Small images with text
  • Buttons and icons
  • Logos

 

What software can you use to optimize images for eLearning?

If you have any other tips or suggestions about optimizing graphics for eLearning, please leave a comment. And since you’ve made it all the way to the end of this article, perhaps you should subscribe to my blog!

About these ads

6 Comments on “How to Optimize Your Graphics for eLearning”

  1. Nice post Nicole. I have found many designers using heavy Graphics files in the course – all to have a bad user experience.

  2. Lee Graham says:

    Solid post! Don’t forget Gimp to your list of software. =)


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 4,609 other followers