This question is quite frequently asked by web designers with all levels of experience. The really short and sweet rule to remember is:
Lots of colors, JPEG... Solid colors or no gradations, GIF.
The first thing to understand about GIF and JPEG image formats is that they are both compression based formats. In other words, they take an uncompressed image such as a bitmapped image, and compress them to a smaller file size. The usual result of this conversion is a significantly smaller image size.
It might seem that one compression method would always result in smaller file sizes, but that is simply not the case. The GIF format is excellent at compressing images that have relatively few colors with no gradations. In fact, most small web graphics which are saved in GIF format should never exceed 10 kb. Now in the world of images... that's small! By contrast JPEG compression, when there are few colors and no gradations, usually results in images which are larger than their GIF counterparts and appear noticeably degraded.
As was stated before, each format has it's own particular advantage. And while GIF's may win out with the non-dithering, fewer color images, JPEG is King for dithered continuous tone images. A continuous tone image has a smooth transition or blend from one color to another. A good example of this would be a photograph. Rarely is a picture of anything a single color. There are many color changes, shadows and even gradations of color on objects. All these colors and shades floating around call for the JPEG format.
Image Use on the Web
