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?

• Adobe Photoshop (free trial available)
• Adobe Fireworks (free trial available)
• MS Paint (Comes with Windows)
• Smush.it (free)
• Picasa (free)
• PNG Gauntlet (free)
• Riot (free)
• Gimp (free)

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

---