Preparing Graphics for The Web
Introduction | JPEG File Format | GIF File Format | Which Format to Use | Display Types | Tips and Tricks
HEAD TO HEAD: JPEG vs. GIF
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.)
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!)
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.
Introduction | JPEG File Format | GIF File Format | Which Format to Use | Display Types | Tips and Tricks© Douglas E. Gray.
You can convert RAW, JPG, GIF images, prepare photos for the web with ReaJPEG - batch photo editing software and raw converter.
product updates, new releases