Gradient Effect

“Gradient effect”? The topic of this page is not about how to create gradient effects. Actually, this page simulates a battle between the GIF, JPEG and PNG image formats. Yes, a battle to determine which image format is the best to show gradient effects on a web page. In this battle, two aspects are concerned:

• File size of the image
• Quality of the image

Let the battle begins!

GIF

First, we meet our old friend, GIF. Below are some samples with different color depths and with/without dithering:

• (7.8Kb)
• (20.1Kb)
• (2.5Kb)
• (7.8Kb)

From the samples above, it's clear that we would pick the 4th GIF image as our choice because it's small in file size yet still maintains its quality with dithering.

JPEG

Okay, how about JPEG then? Observe the following samples (all are progressive JPEG files), each with different lossless lossy compression percentage:

• (5.1Kb)
• (2.2Kb)
• (1.6Kb)
• (1.5Kb)
• (1.3Kb)
• (1.2Kb)
• (1.2Kb)
• (1.1Kb)
• (0.9Kb)
• (0.8Kb)

Wow, JPEG format is even better. The 5th JPEG sample would be a suitable candidate, as it's 6.6Kb smaller than our previous choice above. The quality is good enough, better than the 6th JPEG image above (40% compression).

PNG

This is our last competitor, the new PNG format. Samples shown:

• (0.7Kb)
• (0.5Kb)
• (1.2Kb)
• (14Kb)
• (0.3Kb)
• (6.2Kb)

Whoa! PNG rocks! Now, you obviously know which format is the winner. Yes, the 2nd PNG sample above. Among all the three competitors, it has the best quality in 24-bit color depth and incredibly smallest file size at just 0.5Kb!

The point

I hope you could see my point here, on this web page. I want to prove that PNG is the best image format around. There's no reason for not liking it. Use it and be happy with it.