Real World Examples
by Andy Rush

Gif

O.K. We could talk until we're blue in the face about when you should use gif and when you should use jpeg for your images in a web page. Sometimes it is just best to show you. The Gif format is best for logos or "line art" images, or those with large blocks of solid colors, such as the black, gray, red, white, and blue of the image to the left.

The gif compression scheme, or algorithm, works best at analyzing those solid colors and how they are arranged in the image, and describing the image more simply. This has the advantage of a producing an image with a relatively small file size.

Let's see what happens to the image when we use jpeg compression on this image.

 

 

high quality jpeg (11,272 bytes)	medium quality jpeg (6,717 bytes)	low quality jpeg (4,626 bytes)

The three images above demonstrate the effect of using jpeg compression on the image of the stamp. The high quality jpeg looks good, but it's more than three times the size of the gif version. As the quality goes to medium and then to low, the file size gets smaller, but the quality gets poorer. The gif version, at 3,274 bytes, is still a smaller file size than the lowest quality jpeg. Gif is the obvious choice for the image of the stamp.

 

Jpeg

high quality jpeg (11,447 bytes)	medium quality jpeg (6,315 bytes)	low quality jpeg (3,921 bytes)

Jpeg really shines when you are displaying "continuous tone", or photographic images. There are different quality settings you can choose as well, and will involve a trade-off of file size. The high quality jpeg looks great but is almost three times the file size of the low quality jpeg. If you can get away with it, use the low quality version, or compromise with the medium quality.

Now let's see what happens when we try to use gif compression on the images of the building.

optimized gif (24,789 bytes)	256 color gif (14,057 bytes)	64 color gif (11,386 bytes)
16 color gif (7,597 bytes)	8 color gif (6,164 bytes)	4 color gif (4,011 bytes)

You can get a gif version of this photograph to look as good as the high quality jpeg, but with the penalty of a large file size. As we reduce the number of colors in these images, you see a corresponding degradation in image fidelity. Also notice the dithering (the scattered dots) that occurs (Note: if you are viewing this on a 256 color video card setting, all of these images will have dithering). The 8 and 4 color gifs approach the file sizes of the medium and low quality jpegs, but the color fidelity is unacceptable. Jpeg is the obvious choice for the image of the building.