Best Image Types for eLearning

This course will cover .bmp, .jpeg, .png, .tiff, and .gif image files, and discuss which ones are best for eLearning.

.bmp

.bmp

.bmp

The .bmp image type is also known as a bitmap. It is a raster image file format. 

Pros

  • Compatibility across devices
  • High quality images
  • Used for printable images

Cons

  • Uncompressed - results in a large file size

Show more

Skip it

Due to the large file size, .bmp is not recommended for eLearning. It would take too long to load on a screen, and it would make the overall course file size bulky.

.jpeg

.jpeg

.jpeg (joint photographic experts group)

A .jpeg or .jpg is a lossy compression file type. It compares every 8x8 block of pixels to 64 standard patterns then determines how much each of those 64 patterns contribute to that block. The higher frequency, the smaller file.

Pros

  •  Small file size (10x smaller than a .bmp)
  • Works best with photos - details hide compression artifacts
  • 16 million colors


Cons

  • Some image data is discarded
  • Struggles with sharp edges and curves in images, which results in jagged edges, blurry, and less defined images.

Example of a .jpg image

Show more

Keep it

Use .jpegs for photographs in eLearning courses. They hide the compression artifacts in the details. 

Avoid using .jpegs when the image is drawn or has sharp edges.

.png

Pros & Cons

.png (portable network graphics)

 This file type uses lossless compression.

Pros

  • Compresses images without leaving artifacts
  • 16 million colors
  • Transparency

Cons

  • Larger file size than .jpg

Show more

Keep it

Use this file size when you need transparency in part of the image. This is useful for placing images on a colored background. It is also a good choice for complicated vector images.

What is a unique benefit of a .png image file?

  • Wide range of colors
  • Transparency
  • Compressed file size
  • Animations

.tiff

.tiff

.tiff or .tif (tagged image file format)

Can use compression, but supports uncompressed images as well

Pros

  • Many different color spaces and options

Cons

  • Large file sizes

Show more

Skip it

The .tiff is useful for professional photography and printing, but skip it for eLearning. The file sizes are too large.

.gif

.gif

.gif (graphics interchange format)

 

  • Good for logos and web designs
  • Appear grainy when used for photos or complex images

Pros

  • Lossless compression
  • Animations

Cons

  • Color palette limitations (256 colors)

Show more

Keep it

.gifs are good for logos and web designs. Use this when you have a drawn image or sharp lines. Avoid using it for photos or complex images, because they can appear grainy due to the lack of color. 

It is yin to the .jpeg's yang.

Scenario

Scenario

Post-Test

Match the correct file types to their best known attribute.

  • Supports transparency
    .png
  • Supports animation
    .gif
  • Compresses images
    .jpg
  • Photographer's favorite
    .tiff

Match the best file to the image type

  • Raster
    .jpg
  • Vector
    .gif

Conclusion

Final Thoughts

Best Image Types for eLearning

There isn't one best image type for eLearning, so you need to select the best image type for the situation.

.jpg

Use .jpgs for photos (like the one below)

.png

Use .png for transparent or vector images

.gif

Use .gifs for animations

easygenerator Review

Pros

  • Easy to use
  • Free!
  • Awesome scenario builder
  • Numerous content and test options

Cons

  • Unable to upload images
  • Rigid layout

Keep it

Overall I thought this course building software was easy to use and diverse in it's options. I was really impressed by the scenario builder. I received an error message every time I tried to upload an image. I'm not sure what was causing this, but it's probably specific to my computer. This limited my ability to make the content and test questions more engaging. This wouldn't be good if you wanted to customize the look and feel of the layout, but it's great for a simple course.