File Format Headache Pills

There are so many digital image file formats to choose from—.JPG, .BMP, .TIFF, .GIF, .RAW, .PNG—it can make your head spin! How do you decide which file type is most appropriate for the imagery in your project? Here are some tips to help you choose.

Digital Image File Formats for Web Delivery

The three most commonly used digital image file formats for web delivery are: .JPG (a.k.a. .JPEG), .PNG, and .GIF. These file formats are compatible with most web browsers because they’re compressed and therefore tend to be smaller, making them ideal for web delivery.

So what is the difference between these file formats? Without getting into the nitty-gritty, the most easily identifiable differences have to do with compression and quality.

Compression

There are two terms people throw around a lot when talking about compression: “lossy” and “lossless” … but what do they really mean?

Lossy compression means that while the file is being compressed, some of the original data (usually redundant and undetectable) is permanently removed in order to dramatically reduce the file size, which is the case for both .JPG and .GIF files. Depending on the image content and how much the image is compressed, it can be more or less noticeable.

Lossless compression is when the file size is reduced without removing any of the original data, like in .PNG files. This means that for all intents and purposes, the images appear exactly the same.

Quality

Many different criteria determine image quality. For the purposes of this article, we’ll stick with the one that’s most obvious to the naked eye: color.

In terms of color quality, .JPG and .PNG file formats are light-years ahead of .GIFs, as they support millions of colors, while .GIFs only support a maximum of 256.

Other Criteria

Other criteria you should consider when choosing your file format include:

  • Transparency: For example, if you want to place a character on top of a separate background image, you’ll want to use a .PNG, since .JPG and .GIF formats do not support transparency.
  • Loop Animations: Recently, after a 10-year absence, loop animations have come back into style. If you would like to include some of these in your course, you’ll have to use .GIF files, since it is the only one of these three formats that supports loop animations.

What to Use When

So how do you decide which file format to use for which image? Use this quick-reference chart to help you understand the advantages and disadvantages of the three file formats.

.JPG: Best for compressing large photos with many colors in order to obtain a small file size. Not ideal for typography or images with crisp lines or sharp edges, which tend to become blurry.

  • Lossy compression (some of the original data is deleted to reduce size)
  • Amount of compression can be defined
  • Millions of colors
  • Smallest file size
  • Can be interlaced to allow for progressive loading

.PNG: Best for photos when file size is less of a concern or when you need transparency.

  • Lossless compression (none of the original data is deleted during compression)
  • Millions of colors
  • File size not as small as .JPGs
  • Supports transparency of any amount of colors

.GIF: Can be used for small icons, simple diagrams, or graphics with very few colors, but is mostly used for simple loop animations.

  • Lossless compression (none of original data is deleted during compression)
  • Limited range of colors (256 max)
  • Can be animated
  • Can be interlaced to allow for progressive loading
  • Supports single-bit transparency (one color can be transparent)

For more information, check out these articles:

So when you’re choosing graphics for your next course, remember these simple tips! And don’t forget to follow us on Twitter and come back to E-learning Heroes regularly for more helpful advice on everything related to e-learning.

What about you? Got any file format tips to share? Please do so by leaving a comment below!

4 Comments