JPEG vs PNG

Have you ever wondered what the difference is between PNG and JPEG files? Do you think that you can use one or the other in any situation? Think again.

Some time ago I created a graphical button for a website. It wasn't anything too complex. Here it is:

This image is in the JPEG format. Do you notice anything that stands out? If you look closely, you'll notice inconsistencies in the colors. It just looks sloppy doesn't it?

At first, I thought this was a result of me not creating it properly at first. But when I opened up the image file in my image editor, it looked fine. I decided to export it again. This time, the editor automatically exported it as a PNG file. Upon opening the file - the sloppiness was gone. What happened? Here's the PNG version:

Apparently, this was an example of the difference between JPEG and PNG format. JPEG works best with photos because they gradually shift from one color to the next. PNG, on the other hand, works best with text/background graphics that have sudden shifts in color. What was being seen on the JPEG version were called artifacts.

PNG and JPEG while both used for web graphics, have their strong points. Using the one for photos and the other for non-photo graphics will help you achieve better looking graphics in a smaller filesize.