Portable Network Graphics (PNG) files

In the world of computers there are dozens if not hundreds of image formats. So many that I'm not even going to try and list them. But in terms of the Internet, relatively few formats are commonly supported. In fact it seems as if there are 3 main image formats; GIF, JPG, and PNG. I wanted to look more closely at these formats and try and learn more and the PNG format.

GIF
One of the first, if not the first, image format on the Internet is GIF. In the early days of the Internet, most people connected to the Internet via a slow 2400 or 9600 baud modem. So keeping file sizes small was very important. The GIF format uses a palette of 256 colors, so file sizes are pretty small. GIF does support transparencies (a single alpha channel) as well as animations.

JPG
The JPG format has undoubtedly become the king of image formats, both on and off the Internet. The JPG format uses lossly compression to achieve some pretty good compression ratios. I don't think JPG supports transparencies, nor does it support animations.

PNG
The newest format to come along is PNG. Like JPG, this format supports full color, but unlike JPG it uses a lossless compression so image quality is not compromised. Also, PNG has full alpha channel support, not just a single channel as with GIF. So really, you can think of PNG as the best of the two formats.


But how do the three formats compare? I created a sample image using GIMP. It's a gradient from blue to red on top, pure white on the bottom, and some sample text in the middle. Let's have a look at the image in the different formats.

GIF:

If you look closely at the GIF file you can see it dithered the image down to 256 colors. This is especially evident in the red part of the gradient. This would be even more evident if the original image had more colors. The GIF file is fairly small at 16KB.

JPG (80%):

The JPG saved at 80% quality looks really bad around the text. It's easy to see the compression has lost image data in order to get the file size down. This file is 6KB in size.

JPG (90%):

Whereas the JPG saved at 90% looks better, you can still see the loss in image quality. This file is 8KB in size.

JPG (100%):

The JPG saved at 100% looks pretty good. Unless you look really close you cannot see the loss of image quality. This file is 21KB in size.

PNG:

The PNG file is absolutely perfect. You cannot see any quality issues in the image because there are none to be seen. This is pixel for pixel identical to the original image. The PNG file is the largest at 31KB.


Let's have a closer look at these images:

I've enlarged the images 300%. You can clearly see the loss of image quality in the JPG 80% and 90%. The JPG at 100% looks good, until you compare it to the PNG below it. The PNG image is crisp and clear whereas the JPG is blurry.


Conslusions:
When the PNG format started gaining in popularity, I'll admit that I avoided it. Anytime I downloaded an image that was in the PNG format I converted it to JPG. After all, JPG is the king of image formats. But having seem the loss of image quality, even in a JPG saved at 100%, I now see the benefit to the PNG format. Add to that the full support for alpha channel and the decision is clear to me. The PNG format is a better format than the venerable JPG format. For only a slight increase in size you gain lossless compression and full alpha channel support.