gif2png - Convert your images and save bandwidth!

What's gif2png?

gif2png is a utility which converts images from the legally encumbered, obsolete Graphics Interchange Format (.gif) to free, optimized and usually much smaller Portable Network Graphics (.png) files. The actual utility, gif2png is only available as source code and binaries for linux. There is a Windows version available elsewhere but it is horribly out of date, so I have created my own and added a few extras along the way.

But why should I use .png?

The .gif format is old. Unisys hold patents on the compression techniques it uses, meaning corporations implementing .gif have to pay royalties. Even though "normal" users and webmasters do not have to pay to use it, do you really want to be supporting software patents by continuing use of .gif? However the most important factor when converting from .gif to .png is file size. Typically a .png is 10-20% smaller than the original .gif and in some cases as much as 50-75%! Factor that in to a website which primarily consists of .gif images and you can make substantial savings on your bandwidth bill, as well as having your site load faster for users on slower dialup links. Keep in mind conversion from .gif to .png is lossless, meaning you're getting file size savings without any quality loss! How good a deal is that?

But PNG is incompatible! My images will break in half the browsers!

Disappointing browser support for PNG has been the excuse of many webmasters not to convert, however the browsers in use by 99.9% of all your visitors will support PNG images. Internet Explorer 4.0+, Netscape 4+, Mozilla, Konqueror, KMeleon, Safari and many more all support standard 8 bit PNG images with transparency just fine. If you're worried about your images which use transparency because you have heard about "Internet Explorer doesn't support PNG transparency properly" etc, you need not be. IE DOES have issues with transparent PNGs, but only on 24 bit PNG images with an alpha transparency channel. Since .gif files are only 8 bit and indexed transparency, converting to 8 bit PNG files with indexed transparency is a very easy transition to make.

So how can I see how much of a saving PNGs will make for me?

I have created a web interface for gif2png which allows you to upload a .gif file and have it converted to .png, showing you the savings in the process. Try it out for a few images from your site, you'll be surprised at how much PNG can shave off of some images.

Wow, my PNG images are much smaller! How do I convert my entire website?

First off, I'm assuming you're using Windows here. linux users should have noticed that the gif2png homepage has utilities for doing such already. You'll need to have a recent version of Windows that has a proper 32 bit command interpreter (Windows NT, 2K and XP in other words). Download gif2png.zip (56k) and extract it to your Windows directory.

Once gif2png is in place, from the Start menu choose Run, enter 'cmd' and press enter. A command prompt window should appear. Now change the directory to your website's root using the cd command, eg "cd c:\files\website". If you have a directory name with space in it, you'll need to surround it with quotes, eg cd "c:\web development\my website". Now with a little magic command prompt scripting, you're ready to go.

Enter the following command at the prompt:

for /F "usebackq delims=" %d in (`dir /s /b *.gif`) do gif2png -a "%d"

This should recursively run through all the .gif files inside the directory and create a .png file with the same name, eg "title.gif" would have "title.png" created alongside it. This process will not affect any of your existing .gif files, so you don't have to make any backups etc.

Now that you have all your .png files created, it's simply a case of editing your HTML and replacing instances of the .gif files with .png (hint, try 'search and replace' feature). Keep in mind, animated .gif files can NOT be converted to PNG, as PNG does not support multiple frames. For these you'll have to continue to use your old .gif files.

Some WYSIWYG HTML editors unfortunately can't display PNG files with transparency properly, however your page will look fine in any modern browser. Complain to the company that made your editor :)

OK, what the hell.. some of my .PNG images are bigger than the .GIF version! What gives?

Typically on VERY small images (less than 400 bytes or so), the .gif compression is superior. However, when looking at it in context, is a change from 400 bytes to 483 for example such a huge impact? Considering savings of several KB or more can be made from converting other images on your site, having a few bytes gained is a small price to pay for ridding your website of the old patented .gif format.

End bit thingy

Well, hope this guide gave you a little insight into what benefits PNG has over .gif. If nothing else, at least keep a bookmark of the web interface for gif2png handy should you ever find yourself uploading a .gif anywhere :)