When you first start editing images for the web you will know from the images you have viewed and/or downloaded from other people's sites that the two main formats still in use online are GIF and JPG.

Seems straight forward, OK i'll use those two formats then!?
Well yes, but it's amazing how many peole never realise that there is a massive difference in the two formats and their individual strengths, weaknesses and ideal uses.
They are both compressed image formats perfect for use on the web, but where one is perfect for one type of image it may not be for another.

Here's the simplest equation (and to be honest, if you can't be bothered with the technical reasons why, this is enough to remember and you will notice the logic yourself.)
GIF = buttons and graphics designed on a computer for the web
JPG = photograpic images
A little more specific?...
GIF (Can contain up to 256 colours)
Reproduces solid colors and computer generated graphics at high quality and low file size, not so hot at photo graphic images or areas containg many subtle shade of colour like gradients. Use for computer generated icons, buttons, simple animations, images that need a transparent area or graphics with large areas of single flat colour )
JPG (Can contain up to 16.7 million colours)
Ideally suited for photographic images and images containing many subtle shades of color like graients etc. use for pretty much all photographic images apart from those you wish to animate. Will create high quality photographic image and low file sizes. Not so hot with areas of solid flat colour (in such areas you often find horrible artifacts showing themselves as styrange watery 'streaking' unless saved at a very high file size.)
Some Examples Please!...
This first example shows the positive use of the GIF format.
The first image was saved as a GIF using only 8 colours (no more were needed.) The file size came in at 204 bytes (0.20kb) and as you can see it's pretty perfect.
The second was saved as JPG. The only way to get the file size down near the size of the GIF was to save as a low quality JPG. As you can see the results are less than pretty.

Let do the same test with a photographic image. Remember we are looking for the best quality reproduction at the smallest file size.
The first image was saves as a high quality JPG ( high quality to preserve all those subtle shades in the setting sky.) This image came in at a very respectible 16Kb. (a flicker of the eye in download terms.)

...And the second was saved as GIF. The only way get anywhere close to the quality of the JPG was to save with maximum colour pallet of 256 colours. Even using ever colour available to the format, it's obviously a much poorer quality image and actually came in at 16kb (1 kb more than the JPG.)

So just that equation again...
GIF = buttons and graphics designed on a computer for the web
JPG = photograpic images