Why should I use PNG and not JPG ?

Major reason – PNG will give you advantage of Alpha Transparency over JPG.

JPEG – Lossy / Direct only

JPEGs images were designed to make detailed photographic images as small as possible by removing information that the human eye won’t notice. As a result it’s a Lossy format, and saving the same file over and over will result in more data being lost over time. It has a palette of thousands of colours and so is great for photographs, but the lossy compression means it’s bad for logos and line drawings: Not only will they look fuzzy, but such images will also have a larger file-size compared to GIFs!

Good for: Photographs. Also, gradients.

PNG – Lossless / Index and Direct

PNG is a newer format, and is really a good replacement for GIFs. Sadly, however, it has a few drawbacks: Firstly it cannot support animation like GIF can. Secondly it has some support issues with older browsers like IE6. Thirdly, important software like Photoshop have very poor implementation of the format.

Here’s what’s good about it: Unlike GIFs, PNGs can either be Indexed or Direct color (like JPGs), if need be. That means that it can have nice smooth gradients, if you don’t mind a larger file. PNG also supports a nifty thing called Alpha Transparency which means that you have things like smooth drop shadows, even on Indexed color images. Most of the time, an Indexed color PNG filesize will be smaller or equal to a GIF equivalent. Using the extra features (thousands of colours or alpha transparency) will increase the filesize, though.

Essentially using PNG just gives you greater options and flexibility.

PNGs, however, are not intended to replace JPEG images, despite allowing thousands of colours and having compression. A photograph saved as a PNG will likely be at least 5 times larger than a equivalent JPEG image, which very little improvement in visible quality. (Of course, this may be a desirable outcome if you’re not concerned about filesize, and want to get the best quality image you can.)

Good for: Logos, line drawings, and images that require alpha transparency.