Then, why ditch the GIF format? After all, it does what we need it to do, right? Well, simply put, it’s because PNG and JPEG are better, much better. It’s like using an old typewriter instead of a computer to put your thoughts on a piece of paper, it still does the job, but it doesn’t look as good.

So unless you want to create an animated image (which is possible only using GIF), you should use JPEG to create photographic images and PNG for all your other graphic needs.

Comparing GIF, JPEG and PNG formats

Some will argue that I make a big deal out of nothing and that using GIFs is perfectly fine. Actually, I still use GIFs sparingly here and there myself, when I need a basic solid color image for example. But I always compare with a PNG version first to check which is smaller, and when GIF wins, it’s always by a tiny margin.

Below are 3 examples of the same images using GIF, JPEG and PNG respectively. As you can see, they all look similar if not for the file size, but although the JPEG is the smallest, the quality is significantly poorer when you examine it closely.

JPEG - 6 KB

GIF - 14 KB

PNG - 11KB

Advantages and Drawbacks of the PNG Format

First of all, unless you want to make sure that your images are viewable by people who have not updated their browsers since 1997, you are safe to assume that all your website visitors will see them just fine. Then, since the file size of a PNG is almost always smaller than a GIF, you will have a page that loads faster. Not to mention the quality you can achieve with PNGs, since it’s a bitmapped image format that employs lossless data compression. Actually, the quality is even better than JPEG, especially if you use gradients. JPEG advantage is in its lossy compression that result in smaller photographic files, but at the cost of a loss in quality.

The PNG transparency drawback in IE6

That said, there are some drawbacks when it comes to PNG transparency in Internet Explorer, but the culprit is Microsoft, being the latest of the main browsers (as of IE7) to finally understand Alpha Transparency. For Internet Explorer 6, there are some turn-arounds to make it behave nicely and display PNG transparency properly using the MS proprietary alpha image loader filter. Ingo Chao wrote an excellent  article describing ways to fix various IE6 bugs related to PNG transparency.

So don’t take my word for it, next time you create a design layout for a website, create both GIF and PNG versions of your graphical elements and compare their overall quality and size. I bet that in 99% of the cases, you’ll ditch the GIF!