The time has come for some head-to-head comparisons of JPEGs and GIFs. In the following examples, you can see for yourself how well these formats perform their intended purposes, and why these two image file formats are the perfect complement to one another for publishing on the World Wide Web.

We start with an example of a low color depth image with hard, contrasting edges. Notice how crisp and clean the GIF image is. It can be saved over and over again without any image loss whatsoever. The white, yellow and red are bright and perfectly defined. The JPEG images are lossy, even at the maximum Paint Shop Pro compression setting of "1". Pay particular attention to the relative loss of the white, yellow and red lines in the JPEG images. You can see that the edges of highest contrast, white on black, are best preserved. This is due to the difference in luminance (black=0,0,0 RGB; white=255,255,255 RGB). The red is degraded the most, and the yellow not as much (red=255,0,0 RGB; yellow=255,255,0 RGB). So, in reality, JPEG can preserve the hardest edges reasonably well. But still, look at the filesizes. (If your browser doesn't support re-sized images, don't forget to view the second set of images externally and zoom in yourself.)

Full Size
4-color GIF Filesize: 2,366	PSP: 1 JPEG Filesize: 37,137	PSP: 20 JPEG Filesize: 13,001	PSP: 40 JPEG Filesize: 9,176	PSP: 60 JPEG Filesize: 7,114
5:1 Zoom
4-color GIF	PSP: 1 JPEG	PSP: 20 JPEG	PSP: 40 JPEG	PSP: 60 JPEG

So, is GIF superior to JPEG in quality and filesize reduction? Absolutely not. For those images that lend themselves to JPEG compression, JPEG can typically beat GIF 4:1 in filesize, even at the higher quality settings for JPEG compression where image loss is not a factor. And if minimal image loss is undesirable, couldn't we make an argument that GIF is lossy because it can only retain a maximum of 256 colors? Yes. Because remember, JPEG is a 16.8 million color format, which makes it the clear winner for photographic quality scenes and images with soft transitions and gradients.

The loss of image quality resulting from the color depth reduction to 256 for the GIF format is more than a little obvious in the example below. Notice the difference in both quality and filesize in the dithered vs. non-dithered GIF images. The dithered image is less compressible. Neither of the GIFs are of acceptable quality. (If you are viewing these images with graphics hardware configured for 256 colors, then none of the images are of acceptable quality. Upgrade or re-configure immediately!)

JPEG 2,583 bytes 16.8m color PSP Compression: 40	GIF 8,399 bytes 256-color Not Dithered	GIF 11,229 bytes 256-color Dithered

If nothing else, we've learned that each image must be considered on an individual basis, considering the type of image and its function and context within the page, as well as the importance of filesize. When you consider the examples shown above, bear in mind that they represent the extremes of subject matter that perform best for the given file formats. These cases are rare. Almost all of the images you will encounter on the web fall in between these examples, so the choice will never be as obvious as it was here. However, we can make a few assumptions for those cases where one format has been typically superior to the other. So here goes:

JPEG is usually best for images that involve smooth color gradients; typical examples are photos and naturalistic artwork.

GIF is usually best for images with sharp-edged areas of flat color. Examples include line drawings, simple icons and buttons, and textual images (pictures of text, such as the "Preparing Graphics for the Web" graphic at the top of this page).

If there's any question in your mind which format to use for a particular image, try both to see which one gives you the better quality vs. file size tradeoff.

© Douglas E. Gray.

---

You can convert RAW, JPG, GIF images, prepare photos for the web with ReaJPEG - batch photo editing software and raw converter.