How2NotFail

JPGs, GIFs, and PNGs are common ingredients for many websites. Unfortunately it is not uncommon for these file types to be misused. When used properly, they provide an excellent method for keeping file sizes, and ultimately loading times, well under control.

Here is some general information about each file type.

JPG

Jpgs (or jpegs) are best used to display photographs, artwork, and other UI elements on the page. Particularly images with a lot of detail and color variation. Their compression level is very high, and provides an excellent means to bring the file size of those types of images way down.

GIF

Gifs are used primarily for images that contain solid blocks of color, and gradiants. Vector images do well in this format. In addition, Gifs are also able to store additional image data, such as a low quality alpha channel (transparency), and additional frames for animation.

PNG

Pngs are ideal for representing high quality images. They have a wonderful compression ratio while remaining lossless. In addition, they also have a high quality alpha channel to create soft transparencies and more antialiased looking edges, unlike the Gif which usually ends up looking like it was torn off the page. It is important to note that IE6 does not natively support the Png alpha channel, so make sure you use a proprietary library if you plan to use that feature (check with google).