Image Formats on the Web

Differences between image formats never really mattered to me. People tend not to care about the characteristics of TIFF and JPEG unless it makes a difference in their lives. For some, the catalyst to learn is a hobby or a career in photography or design. For me, it was when I started web development.

My whole team was relatively new to the “view source” side of things, as we came from a background of Perl and the command line. Thank goodness for the UED folk over at Yahoo! or we would have had no choice but to create sites that resembled ASCII art. I had a healthy interest in the design side of things, so I ended up tackling Photoshop often, getting my ass handed back to me on a platter on quite a few occasions. One thing that perplexed me were the choices I was told to make when I hit “save as.” Here are my findings from back then. I hope it helps someone out.

Lossless vs. Lossy Compression

In simple terms, lossless compression means that you can compress and decompress an image without losing any information, and lossy compression means that once you compress an image, you can never get the original image back. PNG and GIF fall under the former category, and JPEG falls under the latter.

When to use What

Although they are digital, “real world” images can be considered to have analog traits as they consist of smooth, soft gradients. By “real world,” I mean any image that was recorded by a camera. What lossy compressions aim to do is to reduce the information of an image just enough so that human perception cannot detect any changes. Given this goal, a lot of information can be discarded as our visual perception isn’t as up to par as you would think. Therefore, real world images should be saved as JPEG. I am not aware of other lossy formats, but this seems to be the de facto standard.

Images with sharp edges on the other hand, are the ideal candidates for lossless compression formats. Logos, text, and bullets fall under this category. It makes sense if you think about it–in order to display sharp lines after compression, each pixel needs to remain the same color as it originally was. The most popular lossless formats on the web are GIF (“jiff”)and PNG (“ping”).

GIF or PNG?

One of the main arguments for PNG used to be that GIF was patented and PNG wasn’t; however, the patents on GIF have long since expired. There still remains an important difference: PNG supports alpha transparency and GIF doesn’t. Actually, this statement is not completely true unless you’re dropping IE6 support. Sadly, IE6 is still categorized as an A-Grade browser, and most websites will still need to accomodate it’s limitations. In addition, PNG8 doesn’t actually have an alpha channel, but Fireworks has the ability to simulate alpha transparency using semi-transparent color chips.

Although IE6 doesn’t support alpha transparency by default, you can use the AlphaImageLoader filter or TwinHelix’s iepngfix (a script that applies the filter to multiple images) with PNG24+ images to get near-native PNG support. Please be conservative in the use of this miracle filter, as it does not do it’s magic for free–it causes a linear degradation of page performance on the user’s browser. Your average IE6 user is most likely on an older machine, which will have a harder time processing the AlphaImageLoader filter(s), so you might consider the option of gracefully degrading the image quality for IE6 using Fireworks PNG files instead.