Image Types for e-Learning

This course will explain the different types of images.  At the end of this course you will be able to:

Image Types

Image Files Introduction

Image Files

Image files come in a variety of formats that have a specific use.  Using the right type of image file can ensure your design will come out as perfectly as you intended.  Using the wrong format could lead to your image being a poor quality, print badly, or be missing altogether.  

Most images fit into one of two categories: raster and vector images.

Raster vs. Vector

Raster Images

Raster (bitmap) images are composed of a grid of individual pixels, where each pixel is assigned a color.  Raster images exist at one size.  When you stretch or enlarge a raster image it can become "pixelated" or blurry.

Raster images are typically used for photographs, digital artwork, and web graphics.

Common raster image types include: .jpg, .png, .gif, and .tif.

Vector Images

Vector images are based on mathematical formulas that define geometric shapes.  Unlike raster images, vector are resolution independent.  As vector images are stretched or enlarged, the mathematically equation changes allowing your shape to get bigger without losing any detail.

Vector images are typically used for logos, icons, and digital illustrations.

Common vector image types include: .ai, and .eps.

What image types are raster images?

Select all that apply.

  • .jpg
  • .ai
  • .gif
  • .png
  • .eps

Image File Extensions

Raster File Extensions


JPG (or JPEG) is often used for photographs on the Internet.  JPGs can be optimized to find the perfect balance of small file size and high quality.

A JPG cannot have a transparent background so they are always in the shape of a square or rectangle with a solid background.

Raster File Extensions


The main difference between a PNG and JPG is a PNG can have a transparent background and is generally larger and higher quality.

A PNG is ideal for logos and icons because they can be placed over a colored background.

Raster File Extensions


A GIF is formed from up to 256 colors from the RGB color space.  The fewer colors contained in an image, the smaller the file size.  A GIF is ideal for an image that uses a few solid colors and do not contain gradients or shades.

You would not want to use a GIF for a photograph.

Raster File Extensions


A TIF (or TIFF) is a large raster file, it has no quality loss and is primarily used for images used in printing.

On the Internet you generally want to use images that are smaller such as JPG or PNG.

What image file type do you NOT want to use for a photograph?

  • .jpg
  • .gif
  • .png
  • .tif

What image types do you generally want to use on the Internet?

Select all that apply.

  • .jpg
  • .png
  • .gif
  • .tif

Vector File Extensions


AI is a file created by Adobe that can only be created and edited in Adobe Illustrator.  

It is commonly used for creating logos, illustrations, and print layouts.

Vector File Extensions


An EPS file is a vector file that can easily be resized to any size needed.  An EPS file can be reopened and edited.

AI files can be opened in any program and edited.

  • True
  • False

Final Quiz

Raster vs. Vector

  • Raster
    is an image made up of pixels of different colors to form a complete image.
  • Vector
    is an image made up of mathematical formulas.

Fill in the blank

files are primarily used for logos and icons.

Which image is most likely a PNG file?

Which image file would you not want to use in e-Learning because of the size?

  • .jpg
  • .png
  • .gif
  • .tif

Course Project Scenario


What image file is best?

Is one file better than another?

In adding images to e-Learning one image file type is not necessarily better than other. Each file type has it's place in e-Learning, with the exception of a TIF (a TIF image is too large for e-Learning), depending on how you will be using it.

A vector image should be converted to a raster image before inserting it into an e-Learning course, as most course creation platforms do not support .AI and .EPS file types.

Knowing how you will be using the image will help you decide between the .JPG, .PNG, and .GIF file types.

Final Thoughts

Like the name indicates, easygenerator was fairly easy to use.

I liked that the theme and design choices were easy to apply and simple in the design. However, I wished that I could have selected a different background picture for the title slide and the rest of the course. I would rather have not had an image on the content slides. I felt like it got a little busy when adding my own pictures to the course.

When creating the course content, I found it time consuming to be in the content editor and having go back to the course to add additional sections. I did like that I could add new items to the current section without having to back to the course.

Quiz questions were easy to add and edit. I liked that there were so many choices and not your normal true/false and multiple choice questions. I was little worried about adding a scenario into the course after trying to build one in PowerPoint, but it was surprisingly easy and didn't take much time to build.

One thing that I didn't like about easygenerator was to preview the course I had to switch windows and it didn't update as I made changes without closing it and reopening the preview. Sometimes it took longer than I had patience for to open the preview. 

Overall I think easygenerator is a good cloud-based program to use for creating basic courses quickly.