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 optimize graphics?

  • 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

 how to optimize graphics

  • 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 format to use?

File Type Description eLearning Use
  • Supports RGB colors
  • Typically used for photography
  •  Photos
  • 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
  • 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 to use?

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!


6 thoughts on “How to Optimize Your Graphics for eLearning

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s