GIF vs PNG

by  Joseph Hinson

I sometimes get so used to doing something a certain way, I don’t stop to ask why, or why not another way? This has been the case for me when developing web sites using PNGs instead of GIFs. I’ve often thought when looking at other sites, “Should I use GIFs?”.

I spent a little bit of time experimenting with the transparency of the GIF format vs the PNG format. I know there’s a lot of technical stuff that goes into the differences, but I’m just going to present my findings.

I started with a pretty simple, quick and dirty web 2.0 badge. I saved it with transparency using 256 color GIF, 256 color PNG-8, then PNG-24. I was pleased with my findings, see the image below:

It's not hard to see who wins this one.

It's not hard to see who wins this one.

I was suprised to see that GIF’s compression was suprisingly bad. The PNG-8 did much better, at 3/4 the size, and with better transparency to boot. The PNG-24, which I have used extensively, has true Alpha Channel Transparency which is pretty great for absolutely positioning things like logos on top of other items. For GIF’s lack of compression, I might as well use PNG-24 instead.

So based on this very quick and not very thorough test, PNG wins out.

I must issue this one caveat, due to IE’s PNG Issues, you might have to do a little more work to your site. But I promise it’ll look better.



Joseph HinsonJoseph Hinson is the president and owner of Out:think Group, a firm that helps authors build their platforms, connect with readers and sell more books.


Are you building your author platform?

Sign up to get exclusive tips and resources from Out:think Group.

Questions? Feedback?

comments