Interlacing

Interlacing is a method of encoding a bitmap image such that a person who has partially received it sees a degraded copy of the entire image. When communicating over a slow communications link, this is often preferable to seeing a perfectly clear copy of one part of the image, as it helps the viewer decide more quickly whether to abort or continue the transmission.

Interlacing is supported by the following formats, where it is optional: gif, png, jpeg

Dithering

GIF employs a technique called "DITHERING" to trick the eye into believing the color is solid by using two different colors from it's own 256 color palette and placing them, in this case, side by side in a predictable pattern. Notice how the pixels change back and forth from dark to light in the GIF version while the JPG version, with it's 16 million color palette, is one solid color.

gif Vs jpg

Images with Lots of Color – JPG is the answer

Images with few colors – GIF is the answer

GIFs are also the only image format that supports animation (although it tends to get really large in file size really quickly.

If you need an image to be partially transparent then the answer is never going to be a JPG, because there’s no transparencies with JPG. GIFs are currently the only form of transparent image that are supported by the major web browsers

The basic rule that I find is that the large images with lots of color will always be JPG, but sometimes when images are small, around thumbnail size, gifs will work better then as well because you can only see around a hundred colors anyways. (For images under say 100px by 100px)

An excellent article about gif Vs jpg