The Best Image Types for eLearning

outline of a man unsure with image types surrounding him.There are many types of digital images available for eLearning production.  However, not all images are created equal.  What makes a professional is the ability to select and place the most ideal images, both in file type and relevance, in the most advantageous ways.  This short course covers the best image types for your eLearning products. 

Why image type matters

What to consider when adding an image

File Size

How big is the image file? Will it inundate an already loaded product?  Can some pixels be compressed to save file size?  There are certain images where the level of detail supports losing some of the clarity.  This allows the addition of a image without bulking up on storage size making it hard to load.

Image Clarity

How clear and distinct do the edges of the image need to be? Not all image types show edges the same way.  When it comes to certain shapes or directional images or corporate logos a clean look makes a big difference. 


Where will the image be viewed? Will the image be sent online or placed on a website?  Does both the file size and the image quality matter?  Sometimes eLearning stays in one place, like a cloud based system.  Other times its stored and sent via emails or uploaded on a central file system. This could alter the image needs.

What needs to be remembered

When choosing an image file, be sure to consider  if adding a logo or image with sharp edges.  If the file will be sent around  of the image file needs to be kept in mind.  Finally, storage of the product reminds us we need to keep  in mind.

Why does the file type matter

Why does it matter which image type is used?

Briefly explain in 4-5 sentences why an eLearning developer needs to know about different image files and why its important to know which image file is included.

Image Types

JPEG or Joint Photographic Experts Group

Universally loved, but with some drawbacks

JPEG is likely the image file you've seen more frequently.  These images are compatible with millions of color options.  They also can compress images to a much smaller file size.  This makes them great for all variety of display options and is why they are widely used on websites. 

The universal nature and compression capabilities of this file type makes it a favorite for photos.  But there are some downsides.  The compression takes away some of the details in the image.  If the image calls for a crisp edge or clean lines like a logo or distinct shape a JPEG is not ideal.  These edges might come out blurry.  In addition, they aren't transparent.  This means your ability to blend it into the background or purposely blur the edges might be limited. 

GIF of Graphics Interchange Format

Small file size but small color range

GIFs support only a few colors when compared to other file types.  256 colors is the max a GIF can support.  This helps keep the file size on the small side.  However, this means these files are not ideal for complex images like photos.  

The fun bonus with GIF is their animation capabilities, demonstrated below.  There won't be complex actions, but this ability makes your images come to life.  Sometimes this is necessary to draw attention back.

Purple creature with open mouth is waving to illustrate animation

Unlike JPEG, GIFs are transparent.  This allows them to blend better when needed.

PNG or Portable Network Graphics

A little of the JPEG, a little of the GIF, but a lot of the file

PNG support complex images like the JPEG and are transparent like a GIF.  They support full color ranges and detail.  However, their files sizes represent this, they take up a lot of room.

PNG files are more and more common on the internet.  Be careful when using them as they can take up a large amount of space.  However, when creating images for the web or doing cloud based work a PNG is great for tranportability.  They are friendly with multiple display settings.

Still lost on JPEG vs. PNG?

PNG vs. JPEG on your website

View this short clip on which file type is best for your website.  Depending on cloud space available this might be helpful. Closed captions available in video.

Untitled text matching question

  • GIF
    Limited color options, transparent, can be animated, good to use for images with crisp edges.
  • JPEG
    Low file size, supports a lot of detail in the image, universally loved.
  • PNG
    Transparent, supports lots of details, transportable, big file size.

On a scenario slide the developer wants an animated logo.  Which file type best fits this need?

  • JPEG
  • GIF
  • PNG
  • BMP

Helping a Client

Your client wants images to aid in learner understanding.


A JPEG file and a GIF file have what feature in common?

  • Animation
  • Transparency
  • Level of detailing in the image
  • Clarity
  • Small file size

Fill in the Blank

If file size matters and you want a lot of detail in your image it is best to add a  file.  If there is no concern on file size or you want the image to be transparent the better option is a .

True or False

  • GIFS are best for clear precise lines and borders like a logo.
  • GIFS are best for images with intense detail and colors.

Recorded Conclusions

Overall thoughts on Easygenerator

Audio Transcript

This is my first time using easy generator or any cloud based tool for creating a training of this sort and I thought it was very easy to use and user friendly.  I can see why people would use it to create low level trainings, but I don’t know if I would use it for something highly complex or needs a lot of interaction with it.  I like the preset options on easygenerator.  It made it very easy to drag and drop, especially being new to this type of development.

The scenario based exercise was extremely easy to create using their program.  I’m intrigued by it and want to play around with it more in the future. I did like in the content section they have a “old” fashioned editor so you can work with the text and format it the way you want but it would be nice if that was available with the preset options to edit it more than is allowed.  

Some concerns I have stem from the drag and drop or preset options.  It appears I can only use the question types once per section.  On my post test if I wanted more than one multiple choice option that did not appear to be possible because it grayed out something I had already used.  I don’t know if I would like that for something I want to use multiple choice on or for something more complex in nature. 

It made it challenging to move around things.  If I wanted to show the objective for the section, it didn’t appear that was possible using their preset formats.  Maybe that is something they have in other options on easygenerator that might be possible. I’ll have to play around with that.

Overall I have very good impressions on this cloud based tool and plan to use it in the future as needed, especially on things that need a quick turnaround or need to be put out quickly due to the fact it is so easy to work with.  It seems to do well for ADA compliance.  They have fonts that are in good contrast and easy to read. Alt Text was easy to add with the images.  For videos you can make sure to use ones with closed captions.  Something to consider in the future.  

Overall I enjoyed using this and look forward to working with them more in the future.