Skip to main content.

Real World Examples

by Andy Rush

non-dithered gif (3274 bytes)Gif

O.K. We could talk forever 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 when we use jpeg compression on this image. Note that the image to the left is in gif format and takes 3,274 bytes of disk space. To verify that, or to get the statistics on any image from a web page, right-click on the image and choose properties.

 

 

high quality jpeg (11272 bytes) medium quality jpeg (6717 bytes) low quality jpeg (4626 bytes)

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 above, 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 (11447 bytes) medium quality jpeg (6315 bytes) low quality jpeg (3921 bytes)
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 (24789 bytes) 256 color gif (14057 bytes) 64 color gif (11386 bytes)
optimized gif
(24,789 bytes) 		256 color gif
(14,057 bytes) 		64 color gif
(11,386 bytes)
16 color gif (7597 bytes) 8 color gif (6164 bytes) 4 color gif (4011 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.