Both file formats store their data similar to Windows Bitmaps (*.BMP) by "mapping" each pixel and it's color, but are superior to Windows Bitmap format with reduced filesize (storage space & bandwidth) and therefore ideal for usage on websites... but for different reasons.

JPG's (jay-peg) are similar to BMP's in the sense that they can store up to full 32-bit color depth (approx. 16.7 million colors) and are therefore ideal for photographs or gradient images. They are superior to Bitmaps in the sense that they are a "compressed" format (like a *.ZIP file) so they take less storage space on a disk. Then, when a JPG image is viewed, it is "uncompressed" into the computer memory (RAM).

In other words, if a (uncompressed) Bitmap is 100 KB large when stored on a disk, it also requires 100 KB of memory to view. Whereas, the same image compressed as a JPG would still require 100 KB of memory for viewing, but can be compressed into perhaps as little as 10 KB when stored on a disk, depending on the image.

GIF's (giff) a not a compressed format. GIF's have a maximum 8-bit color depth, which means they can not contain more than 256 colors. If 256 colors sounds like a lot, it is actually very little when compared to the 32-bit color depth of a JPG or BMP. Often photographs stored in a GIF format will appear "grainy" or dimished in quailty. However, 8-bit color depth means smaller filesizes, and therefore less storage space on a disk and less bandwidth. So GIF's are ideal for non-photographic images such as icons, navigational buttons, borders, etc.

Another advantage of GIF's over both JPG's and BMP's is that they can be transparent and/or animated. Transparency allows GIF's to have an invisible background making the image appear to be round, or any non-rectangular shape. GIF's can also be animated (like a Filmstrip) showing multiple still images in sequence to create the illusion of motion.

Related Articles:

PNG images - The next big thing?
...as opposed to GIF's and JPG's

HTML Tip: ALIGN="CENTER" doesn't work in the <IMG> tag!

The ALT attribute: the perfect solution!
Images are only to enhance page content but should never be page content!

The many wonderful uses of the ALT attribute in the <IMG> tag!
Make any image meaningful