GIF vs. JPG--Which Is Best?

One of the most important and difficult concepts to learn about digital imaging is which format is best for displaying graphics and photos on the web. Unfortunately, there are no clear cut answers to this question. It depends on the image to be displayed. There are two important factors to consider: file size and image quality. Currently there are only 2 widely supported formats [GIF and JPG] that will display on the web. There is another up-and-coming format [PNG] which is only supported by the leading browsers in version 4 and above. Right now, let's not worry about the PNG format. Let's compare some GIF and JPG images to get a feel for which format works best for what type of images--generally speaking, of course, because there are always exceptions. If you understand what each format does best and where each formats drawbacks lie, you can make an educated guess about which format to choose for various images when preparing them for display on the web.

Graphics

First, Let's Look At Graphics:
Although the term "Graphic" can refer to all types of images in print and web layout, it generally refers to images that are non-photorealistic. Graphics and Line Art are generally simpler in composition than photos and have large areas of solid color. In the "graphic" examples below you can see compression artifacts on both JPG versions. The more compression employed, the worse the artifacts become and the quality of the whole image deteroriates.
The GIF version of this graphic is clean and crisp. This is the type of image that GIF does best because GIF employs a different type of compression than JPG. GIF's compression is called "lossless" literally meaning "doesn't lose quality" when compressed. JPG employs "lossy" compression which literally means the image "loses" quality during the compression process. Even though the file size is slightly smaller in one of the JPG versions than the GIF, the image's quality is sadly lacking. Which would you choose to display on your page?

GIF=5 KB
JPG [15% Compression]
6 KB
JPG [60% Compression]
4 KB

What's the downside of using GIF?
The GIF format only supports a palette with 256 colors while JPG's palette supports 16 million colors. This means that the colors you choose may not be the final color you see after saving in the GIF format unless you picked your color from the GIF palette of 256 colors. Your image editor will "dither" the color to approximate the nearest color it has in it's palette. Although you can't readily see the dithering in the GIF version of this image, it is there. You can see it if you zoom in on it.

GIF-Dithered What is Dithering?
GIF employs a technique called "DITHERING" to trick the eye into believing the color is solid by using two different colors from it's own 256 color palette and placing them, in this case, side by side in a predictable pattern. Notice how the pixels change back and forth from dark to light in the GIF version while the JPG version, with it's 16 million color palette, is one solid color.
In this GIF example, dithering does a good job of tricking the eye. You can't really see the dithering until you zoom in quite a bit. I had to zoom in to 8:1 to get these shots. However, depending on the color you choose, dithering can be more complex and therefore visible to the naked eye without zooming. And because of all the color switches from dark to light to dark, the file size necessarily increases.

JPG-Not Dithered

What if????
What if a color straight from the GIF 256 color palette [that would not need to be dithered] had originally been used to flood fill this graphic?
Answer:
The file size of the 5 KB GIF graphic [above] would have been significantly reduced because the information that had to be carried in the file would have been much less. Remember, those color switches back and forth eat up file memory.
And here it is! There is no dithering and the file size is 2 KB lower than the dithered counterpart above.

GIF = 3 KB
This graphic was created in Paint Shop Pro v.6 at 256 color depth and flood filled with the red color from the 256 color palette. The color depth was increased to add the antialias text and to buttonize the image. Then the color depth was decreased [COLORS>DECREASE DEPTH>256 COLORS] with the following options: STANDARD/WEB SAFE/NEAREST COLOR.

Textured Backgrounds:
OK...now let's look at what happens when we change the background from solid to textured. I used a graphic with a solid background above on purpose because you can easily see the compression artifacts on the solid background. When you add more color switches JPG compression artifacts are not as noticeable because they are hidden by the color switches. Also, when you add a textured background the file size generally increases in both the GIF and JPG format [as seen below] because more information has to be carried in the file.

GIF = 21 KB
JPG = 18 KB

Now we have a different ball game entirely. Since compression artifacts are no longer an issue and the file size is reduced by 3 KB, JPG would be my choice for this displaying graphic. This would also most probably be the case when gradients and drop shadows are used in addition to or in place of the texture.

Photorealistic Images

Now we move onto photos. Below are two photos, one saved as a GIF and one as a JPG. Because of the smallish size of these images, you can't see much difference in quality until you zoom in. However, right off the bat, there is a VERY significant file savings in the JPG image.

JPG=4 KB
GIF=22 KB

However, if you take a closer look (zoom in) you can see the GIF image has been forced to employ DITHERING because it didn't have enough colors nor did it have the correct colors available in the GIF 256 color palette.

GIF Dithering in Photos
Dithering in photos is generally more visible because the dithering is not in a predictable pattern. Also, the amount of colors that have to be dithered is greater because photos generally contain thousands of colors whereas graphics contain only a few by comparison. In this example the dithering shows up as graininess in the GIF version while the JPG version looks smooth by comparison.
Notice the difference between the composition of photos and graphics. Photos are made up of thousands or millions of colored pixels. There are rarely two of the same colored pixels next to each other in a photo. This is necessary to give the detail involved in reproducing a photo digitally.
The JPG format is truly custom made for compressing photo information because, as in the Textured GIF image above, the compression artifacts are hidden in the color switches that photos are made up of and the large amount of colors available in the JPG palette lends itself to the type of realistic detail that photos need to display well.

It is rare indeed, although it does happen, when a photorealistic GIF image will outshine it's JPG counterpart in file size and image quality.

Pat Kalbaugh
Copyright © 1999
All Rights Reserved