Bit Literate: The Digital Survival Guide for Adult Learners

Digital Image Formats and Compression

To work effectively with digital images you need to understand image formats and image compression. As you are probably aware there are several different image file formats in common use: JPEG, GIF, PNG, TIF, BMP, Photoshop, and “raw” to name just a few.

Do you know how to pick the format best suited to your purpose?

In this Bit Literate Guide we’ll provide a brief overview of the different image file formats and we’ll give you guidelines for selecting the most appropriate one. Then we’ll explain image compression so you know what's really going on when you save a digital image.

Image Formats

The main thing that distinguishes image formats from one another is the way in which the image is compressed. Uncompressed image files are very large, so some form of compression is used for almost all images.

JPEG, GIF and PNG are commonly used compressed image formats while raw and TIF are uncompressed (there is a compressed version of TIF, but we will ignore it).

If you’ve worked with digital images you are probably most familiar with the JPEG image format. JPEG is the format used for the vast majority of digital images seen on the Internet and it is the format you typically use when working with images created using a digital camera.

But many digital cameras, when used with the highest quality settings, actually produce images in what is called a raw format. Raw is actually not a format per se, but rather the uncompressed proprietary format used by the manufacturer of your specific camera. The key point is that when you save an image in a raw format you are getting every bit of data that was captured by the camera. The image is not compressed in any way. So you may be thinking, “yes, that’s what I want, I want the highest quality images.” The problem is, as was noted before, uncompressed images can be very very large.

For example, let's say that you have a five mega-pixel camera. A typical camera in this range can capture images that are 2500 pixels wide by 1950 pixels high. That's 4,875,000 pixels. So an image like this contains just a bit less than five million pixels. And on top of that you need 3 bytes (a unit of computer storage) per pixel for full color images. So do the math:

4,875,000 * 3 = 14,625,00 bytes

That’s over 14 million bytes. So your single uncompressed image is over 14 megabytes in size. If you’ve used digital cameras for a while you may remember (and perhaps still have) digital memory cards that hold 16 or 32 megabytes. So how many 14 megabyte images can you put on a 32 megabyte memory card? That’s right, two, not very practical. Of course most cameras can be set to save images at smaller sizes and/or using a compressed image file format (like JPEG). Our example image, saved using the “high quality” JPEG setting, on a typical camera would likely take only 2 or 3 megabytes of space. That way you could put 10 to 15 images on a 32 megabyte memory card. Not great, but at least usable. And today many people use memory cards that hold 256 or 512 or 1024 megabytes (one gigabyte). These cards can store a lot of pictures.

But perhaps you may be wondering what is lost when you take a 14 megabyte image and compress it so that it only uses 3 megabytes of storage? The answer, at least when using the JPEG format, is that you lose a little bit of quality, but not much. The JPEG compression algorithm produces highly compressed images with only a slight loss of quality.

But nothing is perfect so there are a couple of things everyone should know about JPEG.

First, JPEG is a “lossy” compression format. This means that when you save an image in the JPEG format you are permanently discarding some of the information from the original image. Once this is done, that information can never be restored. And here's the gotcha. In some software this can happen each and every time you save the image. If you repeatedly open and save a JPEG format image you might be throwing away a little bit of the image quality every time you save the file. Good image editing software overcomes this problem and only compresses the image when you specifically change the quality level. But this is a problem you should be wary of.

The second thing you should know about JPEG is that ratio of quality to compression is not constant. You actually get most of the benefit at the highest quality settings.

The graph illustrates the point:

This graph shows the relationship between JPEG quality levels and file size for a large image file. The uncompressed raw image was over 18.5 megabytes in size. Saving the image using the JPEG quality level of 95 resulted in a file of just under 4 megabytes. That’s close to an 80 percent reduction in the size of the file. And while I could tell you that the compressed image is indistinguishable from the original, you should judge for yourself. Here they are:

The uncompressed image (this will take a couple minutes to load)

The “95” quality level image

To go further, we can see from the graph that saving the original image at the 80 quality level pushes the size of the file down well under two megabytes. For many images and purposes, the 80 quality level represents the sweet spot. At 80 there typically will be a slight loss of image quality, but for many uses it will be undetectable.

So what can we learn from this? Use the 95 quality level to get the best file size reduction with no discernible loss of image quality and use the 80 level if your requirements put file size reduction over image quality. So why not go lower? Look at the graph. JPEG compression is a clear-cut case of diminishing returns. Below the 80 quality level you get very little additional reduction in file size but you will start to notice the loss of quality in the image. At lower quality levels JPEG images become fuzzy and blotchy.

You may have noted that I have consistently referred to the JPEG quality level, not as a percentage, but as the “95 quality level” or the ’80 quality level”. That’s because, despite the common perception, the number you choose when you select the JPEG compression level is not a percentage. As you can see from the graph, the JPEG compression algorithm doesn’t produce a linear reduction in image file size. A file saved that the “50 quality level” isn’t half the size of an uncompressed file. It’s a tenth the size. The number you select when setting the JPEG quality level tells the compression algorithm how much information you are willing to throw away. The precise amount of compression you will get depends on the image. We'll come back to this when we talk about how JPEG compression works. But before we do that a few words about the other commonly used image file formats; GIF and PNG.

GIF and PNG

GIF is a well-known and commonly used image file format. It compresses well and it is lossless, meaning that when you compress an image in the GIF format no information is lost. However, GIF is not suitable for high quality continuous tone images like the ones produced by a digital camera. The problem is that a GIF format image can contain at most 256 distinct colors. That might sound like a lot, but a modern computer monitor can display up to 16 million different colors. A full color photo saved in the GIF format will show blotches and streaks where similar colors have been blended together into a single compromise color. For this reason GIF is used only for graphics and “line art” images that contain fewer than 256 colors.

The PNG format was created in the mid 1990s because the Unisys Corporation decided to enforce their patent on the compression algorithm used in the GIF format. Because many software developers did not want to pay Unisys every time they used a GIF format image (in those days, computer monitors typically displayed 256 colors, so GIF was used for everything) they got together and created a patent free alternative called PNG. The PNG format is well designed and is the best choices for some uses. Two things stand out. First, like GIF, the PNG compression scheme is lossless, you can save an image in PNG as many times as you want and no information is lost. For this reason PNG is sometimes used as an intermediate format for images. The PNG format doesn’t have the 256 color limitation that GIF has, so it can be used with full color images, line art, you name it. The problem with PNG is that the file size reduction you get for full-color images doesn’t come close to what you get using JPEG. So if you need lossless storage and can live with big files use PNG. For display or transfer of images when the size of the file is a concern, use JPEG.

Here’s comparison of the main image file types:

Image compression

The remainder of this document explains how image compression works.

But we'll start by considering a very simple compression approach that is used on text files. This is called dictionary-based compression. Imagine that you have a word processing file. One way to compress that file is to create an indexed list of the words in the file, something like this:

1. JPEG
2. compression
3. format
4. imagine
5. and so on

This list is called the dictionary.

Now when the file is saved, instead of saving the words, the numbers are saved instead. So each instance of the word “compression” is replaced by the number “2”. And since 2 is one character, vs. 11 in the word compression, we save 10 characters each time the word is used.

Of course, to re-create the original content you need to have the dictionary, so the dictionary itself must be saved as part of the file. And this leads to a complication. If a word appears in the file just a single time then putting it in the dictionary doesn’t save anything. In fact it makes the file bigger because you have to save both the word and the number used to represent it. So we only want to put words into the dictionary that appear more than once in the file. And the longer the word, the more space you save. Long words that appear frequently are the best ones to place in the dictionary.

The designers of dictionary-based compression schemes realized that in many cases limiting the list to just 256 long, frequently-used, words provides the most compression bang for the buck. The reason being that a single byte can be used to represent 256 different values. A byte contains 8 bits, and each bit can store either a zero or a one. So that’s 2 to the eight power (256) possible values. And this means that when we replace a word with its numeric code we can always use a single byte, which is highly efficient.

But stop and think about this. During the compression of the document, how can the software know which words to put in the dictionary?

One way it might work is for the compression software to make two passes through the file. On the first pass the software builds a list of all the words and counts how many times each word appears. Then on the second pass the software selects the words that appear most often. The 256 most commonly used words over a certain length are added to the dictionary and are dropped. This list of 256 words becomes the compression dictionary for that file.

So what does this have to do with image compression? Well, a form of this simple compression algorithm can be applied to images. The trick is that instead of looking for words in the file, the software looks for repeated runs of pixels. To visualize how this works you have to know that when an image is stored on disk it is written out to the file a a long continuous run of pixels.

For example, imagine an image that is 800 pixels wide by 600 pixels deep. The first byte in the image file is the pixel found in the upper left corner of the image (actually there’s usually a header, but ignore that). Then comes the second pixel in the first row, , the 3rd, and so on. At the end of the first row (the 800th pixel) you wrap back to the first pixel in the second row and continue. The file is written out as a continuous stream of pixels.

And we can compress an image file by identifying duplicate runs of pixels and treating those runs as though they are the words described in the preceding section. For example, runs of “20 white pixels” or “10 red followed by 10 blue” can be compressed using the dictionary scheme. But there are complications. For one, finding a run of pixels is more complicated then finding a word. And how do you know when you’ve found the optimal combination? Should you store “10 white” and then reuse it for runs of white pixels that go on for 20 or 30 pixels? How about “2 red, 2 blue.” Is that a good run or should you look for longer runs? Because there are no natural divisions in an image file it's much harder to select the best “words” to put in the dictionary.

And there's another problem. Up to now we’ve talked about using just a single byte to index the entries in our dictionary. But if a single byte is used per color (so that each dictionary entry can be represented by a single byte) then we are limited to just 256 colors.

Does that ring a bell? It should, it’s the maximum number of different colors that can be used in a GIF format image, and this is not a coincidence. The GIF format does create a sort of a dictionary (it’s a bit more complicated then how I described it) and it uses one byte per color. That's why the GIF format is limited to 256 colors.

But the human eye can perceive millions of different shades of color and a modern computer can display them so in most cases that's what people expect. But storing millions of colors means that you need three bytes per pixel. Using 3 bytes gives you 2 to the 24 power (3 times 8 bits per byte) different colors to work with (that’s just over 16 million). Now the problem becomes that when there are so many different colors it’s hard to find consistent runs of color to put in the dictionary. What appears to the eye like a run of 20 red pixels might actually consist of 3 or 5 or even 10 slightly different shades of red. And it becomes unlikely that you’ll find that same pattern elsewhere in the file. Which you may remember is what we decided we needed to use dictionary based compression to good effect.

So to compress full color images we need a more sophisticated way to recognize similarity. And that’s one aspect of how JPEG compression works. The JPEG compression algorithm uses techniques from signal processing to find runs of pixels that are similar, and it then converts those runs to more consistent and therefore more easily compressed runs. This conversion is why information is lost when you use the JPEG format.

But, in fact, that description of JPEG compression gives you the flavor of how it works but is a serious oversimplification.

The point is that digital image file formats are defined by the compression algorithm used by that format. And that is exactly where we started with this.

© 2006, Empire State College