PNG and JPG are by far the two most commonly used image file formats on the web. These formats have become the most popular because of their compatibility with modern browsers, broadband speeds, and the needs of average users.
PNGs create transparency in one of two ways. One of these methods employs the same approach used by GIFs, with a single color defined as transparent, and the other is to set an alpha channel . One of the advantages of PNG single-color transparency is that it doesn't remove a color from the available palette. However, the alpha channel is a much smoother method, as it is far better at blending colors, and allows you to select different levels of transparency in specific regions. The transparent areas of the PNG will blend and adjust naturally to whatever is behind the image when the background of the page isn't a solid white or black color.
JPEG's ability to reduce file size up to 15% without losing quality makes it useful for web pages especially for colorful photos. JPG compression is great if you're just trying to send someone a picture through your phone or in an email, two situations where you might not necessarily want to send large files. Although most JPGs look fine from a distance under normal compression, there is a noticeable loss of quality whenever users zoom in on a JPG image. The effects of JPG compression have been greatly exaggerated in the image below to show the loss of quality that occurs.
More on...JPG Vs PNG