JPG vs GIF Which is Best?

One of the most important and difficult concepts to learn about digital imaging for the web is which format is best for displaying graphics and photos on th e web.

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 format (PNG) which is not widely used but provides excellent clarity and rich color. For now, we'll focus on GIF and JPG formats.

SImple line drawings or images without gradients and flat colors generally provide the smallest file size and best quality when created with the GIF format.

Photographic images, images with gradients and many colors generally work best when exported to the JPG format. The exception would be if your image is very small in physical size.

Let's compare some GIF and JPG images to get a feel for the output quality of each. If you understand what each format works 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.

Notice that the file weight for each set of images decreases with less quality or less colors. Also the sky in the two GIF images has become "banded" and lost the subtle variations in color. For this size image the lower quality JPG seems to be the best choice. If the image were larger you would need to improve the quality from 60 to about 70% - 75%.

Now lets compare some simple illustrations.

JPG 100% quality; 34K weight	JPG 60% quality; 8K weight
GIF 128 colors; 14K weight	GIF 8 colors; 6K weight
Click here to download the original image and experiment on your own. (Right click on the link and select "Save Target As")