Graphics Formats: What E-Learning Designers Need to Know

As an e-learning designer, you’ve almost certainly worked with images before. Because, well, can you imagine an e-learning course without images? Without visual engagement, learners would head right for the Exit button!

In the interest of keeping viewers tuned in, you’ve probably used graphics and had to work with image file formats in your projects. Formats are identified by the extension at the end of the file name. The most common file formats for the web are .jpeg, .png, and .gif, but there are hundreds of others as well. What I’d like to do first is to review some of the terms you’ll hear pertaining to image formats so you can more easily understand the strengths and weaknesses for each one.

Raster vs. Vector Images

Raster images are made of pixels, while vector images are made using mathematical calculations from one point to another, which form geometrical shapes. How does this impact you? Well, if you enlarge a raster image beyond its resolution, it will become pixelated and the quality will be degraded. A vector image, on the other hand, can be enlarged to any size without losing its crisp edges. Common raster file types include: .jpg, .jpeg, .gif, .png, .tif, and .tiff. Common vector types are: .eps, .ai, .cdr, .ps, and .pdfs originating from vector files. They are usually created in programs like Adobe Illustrator.

Lossless vs. Lossy

“Lossless” and “lossy” describe whether original data from a file can be recovered when the file is uncompressed. With lossless compression, every single bit of data that was originally in the file remains after the file is uncompressed, and all of the information can be completely restored. For example, .png and .tiff files are lossless formats.

In contrast, lossy compression reduces a file by permanently eliminating certain information from the image. When the file is uncompressed, only a part of the original information is there, which the viewer may or may not notice. The .jpeg format has lossy compression. By compressing a .jpeg image, you degrade the quality, and once you’ve done that, you can’t bring the file back to its previous quality. You might need to do this in order to minimize a file size, if the size is too large.

Image File Sizes

The size of an image is generally correlated to the number of pixels in an image and the color depth, or bits per pixel. Images can be compressed in various ways, as previously explained, which means that two images with the same number of pixels and color depth can have very different compressed file sizes.

With some formats, images may end up with different compressed file sizes. Because of this, some lossless formats might have a smaller file size than lossy formats.

Most Common Image Types for E-Learning

Now that we’ve covered some basic terminology, let’s take a look at the three image types used most often in e-learning.

.jpeg

This file type was developed by photographers to create a standard image format for photography. One of the great benefits of the .jpeg format is that files are relatively small in size, but still look crisp and sharp. Another feature is that .jpegs support up to 16.7 million colors, making them a good choice for images or photos with a wide range of colors. With .jpegs, you can have great looking images at a reasonable file size.

.png

Using .png files allows you to incorporate images that have a small file size, but look great too. Such images tend to be larger than .jpegs because they contain more information, but .png files support transparency and are lossless. Often, .png files are used for icons, symbols, logos, or cut-out images that need to be overlaid on top of a background or other image.

.gif

Animated .gifs are often used for simple looping animations, symbols, or icons. They support transparency and create very low resolution files, and they also let you add movement or animation without programming or code. This file type only supports 256 colors, however, so it’s not recommended for use with photos or images with gradients.

And—voilá!—these are some of the basics you should know about the differences among graphic formats. Do you have any tips or suggestions of your own about using different image formats? If so, please leave a comment below. We love to hear your feedback!

Follow us on Twitter and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning.