Early on in the web, programmers and designers wanted to start using photos and other images for web content. However - these files were big and typical connections were slow, and compromises had to be made. Programmers and mathematicians have been working on these problems for years, and the result is a field known as image compression. In short, some data is thrown out, the file size shrinks, and web browser guesses at what used to be there. These are typically referred to as "lossy formats" because some of the original data is lost, and it's gone forever. Once the data is gone, you can't get it back. There are no magic tricks in existence that can make a blurry thumbnail look as clear as a professional photo. This all sounds bad, but luckily the lossy formats such as JPEG, GIF, and PNG were each designed to cause the least noticeable distortion for their specific purpose.
(Keep in mind that data will be lost when working in these formats. When you are working on master images or on images for print, you should use lossless formats such as TIFF, PSD, .AI, or .EPS that keep every pixel of the original file there.)
Here are some examples of the same images - compressed 4 different ways.
Click on the image below for an HTML page of examples.
In conclusion, web graphics have a lot of complexities behind them. However, in most cases, using a PNG is the right thing to use today for everything except photos. JPEGs were designed specifically for photos, and remain the best solution for photos today.
If you would like to research the topic further - Lynda (of lynda.com) wrote Designing Web Graphics, one of the earliest books on the subject. Most of what she covers there is still relevant today, and she has some excellent tricks to get the best quality out of your graphics.