Best Image Type for E-Learning

This course will teach learners about the strengths and weaknesses of 4 e-learning image formats

Basic Image formats.

Background

Images in eLearning

eLearning designers often include images to enhance instruction. In doing so, there are many considerations designers must keep in mind, including file size, image clarity, and image use (static or animated). Based on these considerations, designers must choose from image file types that best meet their needs.




Basic Terminology

Raster vs. Vector Images

Raster images are made of pixels. Vector images are created through dot-matrix calculations that form geometrical shapes. 


Lossless vs. Lossy

These terms pertain to file compression. Lossless compression retains all of the original file's data when compressed and decompressed. Lossy compression is characterized by a partial elimination of the file during compression. This information is removed permanently so that it is not recovered when the file is decompressed. 

Image File Sizes

The size of an image is  correlated to the number of pixels in an image and the color depth, or bits, per pixel. 

Image File Formats (Video)

Please view this short video, paying particular attention to the information pertaining to the following file types: JPEG, GIF, PNG, and SVG. (Closed Caption available.)

.jpeg

JPEG Introduction

JPEG

The file type known as Joint Photographic Experts Group, or JPEG, was developed as a standard image type for photography. 

Advantages and Disadvantages

As reviewed in the clip, JPEGs offer advantages and disadvantages to eLearning designers. 

Advantages

  • Small file size
  • Great for photographs or images with subtle color variation
  • Supports 16.7 million colors

Disadvantages

  • Poor image clarity when viewing sharp lines and edges
  • Images do not scale well when adjusting size

Do to the small file size and wide range of color, JPEGs are an excellent file type for designers who wish to include great looking images that do not take up a lot of storage space. This makes JPEG an ideal format for designers who do not have the resources to store large files on expensive servers. 

JPEG Review

Question 1.

(True or False) The inclusion of JPEGs in eLearnings are often limited due to their large file size.  

  • True
  • False

.gif

GIF

GIF

The Graphics Interchange Format, or GIF, is a lossless compression format that is widely used to create short animations. 

Advantages and Disadvantages

As reviewed in the clip, GIFs offer advantages and disadvantages to eLearning designers. 

Advantage

  • Lossless compression for sharper edges and angles in photos
  • Can be used for simple animations without coding

Disadvantage

  • Only supports 256 colors, leaving high resolution images to appear grainy


GIF

Designers often use GIFs for simple looping animations, symbols, or icons. While they produce sharper images of angles, this file type only supports 256 colors, which makes it unsuitable for use with photos.

GIF Review

Question 2.

(Choose all answer that apply) What are some advantages that developers find in using GIFs? 

  • GIFs are great for use in images of company logos to eLearnings.
  • GIFS are a great file type for adding personal photos to eLearnings.
  • Gifs are a great file type when publishing short animations to eLearnings.

.png

PNG Introduction

PNG

Portable Network Graphics, or PNGs, are a high-resolution, lossless image type without the color limitations of GIFs. 

Advantages and Disadvantages

As reviewed in the clip, PNGs offer advantages and disadvantages to eLearning designers. 

Advantages

  • Preserves very sharp images through lossless compression
  • Images support transparancy

Disadvantages

  • The compressed files are much larger than JPEGs
  • Do not support animation

Designers like PNG files because the lossless file type preserves picture sharpness without the color restrictions found in GIFs.  PNG files are also optimized for compatibility with most web browsers. The only fault to be found with this file type is its large size, which can be limiting when budgeting for storage space is an issue. 

PNG Review

Question 3. 

(Choose the best option) Which of the following best describes PNG files?

  • PNG files have a greater resolution that GIFs
  • PNG files are not limited to a 256 colors, and are great for vibrant pictures

.svg

SVG Introduction

Please watch this video for an overview of SVG images. (Closed Caption available.)

Advantages and Disadvantages

As reviewed in the clip, SVGs offer advantages and disadvantages to eLearning designers. 

Advantages

  • Provides excellent image scaling
  • The file size is very small

Disadvantages

  • Does a poor job rendering lifelike pictures 
  • Has trouble reproducing high granularity pictures into vector format


SVG files are excellent for designers who need to scale up images for billboards, posters, or other signs. SVG files are also great for the types of crisp lines often used in clip art and logos. The drawback designers find comes from the limited ability of SVG files to reproduce the full array of pixels included in high-resolution pictures, leaving them looking a little unnatural. Also, many computers have trouble converting the SVG image types to raster files, which are more compatible with current screen technology. 

SVG Review

Question 4.

(True or false) SVG files are easy to scale because of the high pixel density.

  • True
  • False

Scenario

Can you help me with my file type?

Final Assessment

  • This format is great for scaling images
    SVG
  • This format is often used for animating images
    GIF
  • This lossless format is great for full color images
    PNG
  • This format is great for photos and takes up little space
    JPEG