As eLearning developers we regularly work with images in our projects and while we aren’t all graphic designers, it helps to have a basic knowledge of the terminology around image properties and file types which is what this post is about.

A ‘pixel’ is the unit of measurement used for digital images and when you see the size of an image, let’s say 450 x 300, the first number is always the width and the second is the height:

The resolution of an image is different and is usually expressed as pixels per inch (ppi) or dots per inch (dpi) and this describes how many pixels there are in a liner inch. When sourcing images from a photo website I look for a high ppi or dpi number:

In this example I’d choose the medium (or maybe the large) over the small as it would be a higher quality and better for resizing.

There’s two main categories of images – Bitmap and Vector – and here’s the difference between the two:

Bitmap images are made up of pixels of different colours, they often have large file sizes and when you resize a bitmap graphic larger than the original, it tends to lose quality and become grainy or pixelated.

Vector images use mathematical expressions to represent the image, they tend to have small file sizes and are scalable so when you resize them larger, which means that they don’t lose quality. However, vector images typically require software to create and edit. You may be able to edit the vector image in PowerPoint as Tom Kuhlmann describes here.

It’s also handy to know the differences between the most common image file formats so that you’ll be able to use the right type depending on your purpose.

Types of bitmap image formats:

JPEG or JPG (stands for Joint Photographic Experts Group) – supports millions of colours and are used for displaying digital photos in a compressed format. You can’t have a transparent background with a JPEG and they tend to lose quality the more times you edit and save them.

PNG (Portable Network Graphics) – an alternative to GIF images and can support millions of colours as well as transparent backgrounds.

GIF (Graphics Interchange Format) – only supports 256 colours but they can have a transparent background (one colour can be transparent) and can also be used for creating simple animations.

TIFF (Tagged Image File Format) – great for when you want to display high quality images for printed documents.

Types of vector image formats:

EPS (stands for Encapsulated PostScript) – this format supports both bitmap and vector images and are created with drawing programs like Photoshop.

WMF (Windows Metafile) – also supports bitmap and vector images and was used for Microsoft Clip Art. These files can be edited in PowerPoint.

SVG (Scalable Vector Graphics) – this is a newer format for web graphics that support interactivity on newer web browsers and is also good for animations.

So that’s a brief overview of image terminology and file formats. If you’re interested in learning more about image formats as well as visual design, Connie Malamed has a great book called ‘Visual Design Solutions’ which I referred to in putting this post together. In part 2 of working with images, I’ll share some tips (and a video) that I’ve found useful when working with images in Storyline.