GIF vs JPG


Intro

One of my pet peeves is the old wive's tales about file formats. On the net, there are really only 2 that are widely used - GIF and JPEG. Some people think that JPEG, being newer, is somehow 'better'. Other people think that because JPEG is 'lossy', that makes GIF better. They are both wrong.

Let's look at images, and how each of these formats works. Then we will understand how each has it's strengths and weaknesses.

Digital Images

In the computer, everything is numbers. To describe an image, we have to turn it into numbers. The typical way to do this is to divide the image into dots called pixels. We can represent the color of each pixel by 3 numbers. Typically, each number represents the red, green, and blue component of the pixel's color. Also typically, we use 8 bits of memory (one byte) for each of these numbers, allowing us 256 different levels each of red, green or blue. 256 times 256 times 256 ends up allowing us to represent just over 16.7 million colors. This turns out to be plenty for almost all purposes.

When we refer to the 'resolution' of an image (in computer, not photographic, terms) we generally mean the size in pixels. Thus, when we talk about a 640x480 image, we mean an image that is 640 pixels wide by 480 pixels high.

Compression

Well, if you've been doing your arithmetic, you see a problem. An image 640x480, not really very big, takes 640x480x3 bytes, or just under a million bytes. That's a lot.

Now it turns out that when we send data over the phone line, we have to send 10 bits per byte, so if we could use all the bandwidth in the phone line (which we can't) it would take just over 5.5 minutes to download that image with a 28.8 modem. In real life, we'd be lucky to get it down in 10 minutes, depending on our server and computer.

This obviously isn't the best thing for the net, we need some way to make the image smaller.

GIF

The Compuserve Graphics Interchange Format was one of the first attempts to address this problem. At the time this format was invented the best video boards (and many of today's video boards) could only display 256 colors simultaneously from a palette of 16.7 million. So an obvious first optimization was to store the color table representing the 256 most common colors in the image, and then an index into the color table for each pixel. This not only made the image one third of the size of the original, but it made the display simpler, since the display program could simply load the image's color table into the video board's color table.

Now it turns out that a lot of drawings and things have far fewer colors than 256, so the color table is allowed to be 2, 4, 16 or 256 colors. For a black and white line drawing, each pixel can be represented by a single bit, instead of the original 24.

But they didn't stop there. A lot of times, especially in drawings, there are areas of the same color, or of repeating patterns. Using schemes common to computer file compression, the table of pixels can be further compressed. Where there are large areas of one color in particular, dramatic compression can be had. For photographs, these things don't tend to happen a lot, so the compression isn't so great. 640x480 GIFs of photographs tend to be around 50-100K bytes, a lot smaller than a million, but still large. Paintings, especially if drawn by computer program, tend to be smaller, perhaps 20-30K, and line drawings, even smaller, perhaps 5-15K for that same 640x480 sample image.

100x100x256 color photo
9680 bytes
100x100x2 color drawing
796 bytes

JPEG

Well, image data doesn't behave quite like other sorts of computer data, and the best schemes for compressing the image using the sorts of algorithms used for ordinary data just don't make the images small enough. Something better was needed.

Instead of taking a pure computerist's view of the problem, a group of photographers was convened, called the Joint Photographic Experts Group. They looked at the problem from making the image smaller by suffering some actual changes in the data, without noticeably changing the image. This is why JPEG is called a lossy format - there really is some data loss.

Basically, these photographers recognized that the typical photograph contains a lot of areas of smoothly varying color, and very few straight, sharp edges. Further, except in rare cases that tend not to happen in photographs, errors can occur near sharp edges and not be noticed by the eye. JPEG takes advantage of the eye's error correction capabilities to make a much smaller image.

This image is only smaller, tho, for actual photographs, or images that are a lot like normal photographs. In the pictures below, notice that the photograph is much smaller than the corresponding GIF, but you need to look very hard to see any difference. The drawing, however, has a lot of what appears to be dirt around the lines (you have to look close in this case). And still, even though the drawing has been degraded compared to the GIF, the file is much larger.

100x100x16.7MM color photo
2084 bytes
100x100x16.7MM color drawing
4323 bytes

The JPEG format allows you to decide just how much quality you are willing to sacrifice to get smaller files. Unfortunately, the effect depends very greatly on the particular image. Typically, as you reduce the quality you will see a dramatic reduction in file size until you reach a point where the image quality deteriorates rapidly with little reduction in file size. For drawings, especially line drawings, the quality deteriorates a lot with little impact on the file size.

15% Compression
5265 bytes
45% Compression
2744 bytes
60% Compression
2084 bytes
90% Compression
1308 bytes
15% Compression
6732 bytes
45% Compression
4687 bytes
60% Compression
3944 bytes
90% Compression
2566 bytes

As you can tell, each and every picture requires some experimentation to decide the best balance between size and quality. This is a necessary evil, aggrivated by the popular software for downloading pictures from digital cameras. Most digital camera software applies almost no compression by default. The result is images that are very large (meaning slow download times). Worse, most of the software that comes with these cameras doesn't make it obvious that you can change the compression so as these cameras become more popular, we are seeing slower and slower web pages.

Summary

As you can tell, neither JPEG nor GIF is better - they are just different. Each has strengths and weaknesses, and each shines in it's own particular area. As a general rule, tho, drawings, paintings, text (if you must show text as an image) are all better with GIF, while photographs are better with JPEG. When you do use JPEG, spend a few minutes deciding what is the best quality setting for each image, and save your viewers the pain of downloading a 200K image that could have been 20K.


01 Dec 2001


[Home] [Family] [Work] [Radio] [Computing] [Pictures]