Website Tips: When to use GIF? When to use JPG? When to use PNG?

Summery:

If you need transparency - Use gif
If you dont need transparency - use png.
If you use jpgweb page will take long time to load.

Size comparison with quality of image:
JPG size > GIF size > PNG size

Reff: http://www.wfu.edu/~matthews/misc/jpg_vs_gif/JpgVsGif.html

When to use GIF?

Use GIF when there are large areas of uniform color and the total number of colors is smaller than 256. Consider the following image:

This above original image is saved in the PNG lossless format.

Next, the image was saved as a GIF and as a JPG:

GIF, 1.448 K
JPG, 2.436 K

The GIF image is a flawless copy of the original. GIF can make flawless copy at high compression as long as the image contains large areas of uniform color, as long as the image has no more than 256 colors.

The JPG image above is seriously degraded. The color of the circle has changed, and there are mottled areas in the (supposedly) white areas around the circle and the letters. Click here for an enlarged comparison image. Please note that the degradation of JPG images is controllable. JPG allows the user to choose the balance between file size and image quality, and one could choose better quality than in the above example. However, doing so results in an even larger file size for the JPG.

In the above case, GIF provides a better, in fact perfect, rendition of the original, while delivering a smaller file size. For images like the above, always use GIF.

As all recent browsers now support the PNG format, it is time to abandon GIF for most purposes. The PNG of the above image is smaller than the GIF, and PNG is not limited to 256 colors as is GIF. The only reason to use GIF is for images with transparency. PNG has superior transparency, but unfortunately Microsoft refuses to fix a bug in Internet Explorer’s treatment of PNG transparency. So to reach the widest audience, use PNG only for images without transparency.

  

Points to remember:

JPEG

• Use JPEG to save photographs.
• JPEG cannot have transparent backgrounds.
• JPEG is not good at preserving exact colors – don’t use them for logos or text.

GIF

• Use GIF to save images that have sharp lines (like text) and solid colors. Examples:
  • A solid red square
  • A typical corporate logo
• Use GIF to save images that need to have a transparent background.
• GIF was invented for creating screen graphics – don’t use GIF for images that you want to print on paper because they will look crappy.

PNG

• Use PNG if you want to have images with blended (fades smoothly), transparent backgrounds.
• Use PNG if you need to create print ready high-resolution graphics.