GIF vs. JPEG IMAGE FORMATS
The best rule of thumb is to use the GIF file format for Web graphics that are composed of few colors and contain large areas of uniform color (such as logos, cartoons, simple art work, line art, graphs, and charts). Use the JPEG file format for Web graphics that are composed of textures and gradations of many colors (such as three dimensional objects and scanned photographs).
Why? Because the GIF graphic file format only supports 256 colors whereas JPEG supports millions, but more importantly, JPEG supports millions of color gradations. A blue sky, for example, is composed of millions of gradations of the color blue. Each gradation counts as one color. If your scanned photograph of this blue sky contains more than 256 shades of blue, some of these shades of blue will have to be eliminated when you convert the graphic to GIF format. Reducing colors in this fashion causes unsightly banding.
In addition, you can greatly reduce the file size of some Web graphics by using the JPEG format. In the example below, the left graphic was saved in GIF format and the file size when loaded up to my server is 25 kilobytes. The graphic on the right was saved in JPEG format with about 40% compression and it’s only 4 kilobytes:
 |
 |
| 25 Kilobyte GIF | 4 Kilobyte JPEG |
The downside, however, with using the JPEG format is that JPEGs cannot be interlaced or transparent. Also, if your Web graphic has a large area of solid color, the JPEG format may create an unsightly dither pattern. Dithering appears as a pattern of tiny dots. If your monitor is capable of displaying thousands or millions of colors, you can see evidence of dithering in the sky right around the houses in the JPEGs above, especially in the 4 kilobyte JPEG. (If your monitor can only display 256 colors, both photos will look fairly crappy anyway.)