JPGs
When saving an image, the JPG format is used best suited for images that have continuous tones, that is, gradients of colors -- fine changes from one color to the next -- the kind you see in photographs or images with dropped shadows. JPGs support images with millions of colors
Each time an image is saved in the JPG format, it looses a bit of the file information (due to compression) so always keep a copy of your original file and make modifications from it.

An example of a JPG image

 

GIFs
The GIF uses only 256 colors. For that reason, GIFs are best suited for images that are flat-color areas and shapes that have well defined edges, like type.
GIFs are used to create animations and transparent images. When creating animations, it's acceptable to use images that would normally be saved as jpgs as it would not be possible to save an animation in the jpg format. It simply wouldn't work.

 

An example of a GIF image

 

Everything you see on your PC is created with a pixel which is short for picture element. The pixels are laid out in a grid of columns and rows. In order to have an image with rounded corners or curves, we can either place a round image on a background that blends into the background where the image will be placed or we can create a transparent background. In both cases the illusion of something with curves is accomplished.

 

Bitmap Images
All bitmapped images use pixels. So the larger the image, the more pixels, and consequently the larger the file. This is important to know. Say you want to display a thumbnail version of an image that is 300 pixels wide by 400 pixels high, it's better to use an application that actually reduces the size of the image to something like 75 pixels by 100 pixels. Some people will change the size within the HTML by adjusting the width and height attributes, but what happens then? The surfer will still be forced to download the 300x400 pixels file. You have not reduced the number of pixels in the file. You have only changed the way they are displayed. When you actually reduce the image to 75x100 pixels, you have reduced the number of pixels in the image and so it downloads faster.

 

Vector Graphics
Vector graphics are mathmetical calculations. It's a formula (known as an algorithm) that produces a shape. The file doesn't contain pixels just a calculation. Because the calculation can be adjusted, it can create an image of any size and not significantly increase the size of the file. Flash uses vector graphics. That is why Flash is so desireable. You can have very complex images but because they are nothing more than calculations the file size remains rather small.

 

That's the very basics of image formats.