It’s been a few years since I first found out PNG images with alpha-channel transparency work in some Web browsers. What’s more, 8-bit PNGs are very similar to GIFs but they’re often a little smaller in file-size and they’re not a proprietary format. Very cool. Since then, I’ve used PNG images for logos and just about everything else that doesn’t need to be a JPEG.

Using PNG definitely has come with some frustrations though. Mainly, 24-bit PNGs that use alpha-channel transparency don’t work in IE 6 but you can get around that fairly easily with some simple JavaScript. On a side note, you should definitely check out Angus Turnbull’s IE PNG Fix. It even works with background images. Nice, dude… very nice!

Transparency aside, another major issue has been that even if you get the alpha channel to work, the colors are always off. Well, in most browsers anyway. Safari and Opera seem to be the only two that actually followed the rules for PNG support and even they don’t do it perfectly. Firefox supposedly handles the color profiles correctly too but I haven’t seen that it does. Because most browsers choke on PNGs color profiles, there’s one thing you can do to make things look right: remove the color profile.

Remove the color profile, eh? I don’t know about you but that sounds about as simple as brain surgery to me! Luckily, it is much simpler. There are a few tools out there that do this but I’ve had pretty good luck with pngcrush so I’m going to focus on that. According to the website, it works on Mac, Linux, and Windows but I’ve only tried it on Mac OS X.

I installed it using the MacPorts package manager (formerly DarwinPorts) and it honestly couldn’t have been easier. In a Terminal window, type,

sudo port install pngcrush

and that’s it. You might want to do a sudo port selfupdate first just to make sure you’ve got the latest and greatest MacPorts too. After you’ve got it installed, the following command will remove the color profile from any PNG:

pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB original.png fixed.png

That’s a whopper of a command to commit to memory. Luckily, you can do a couple things to make using pngcrush a little more convenient.  Create an alias for the command in your .bash_profile or the equivalent for your shell.  I used the following line:

alias crush='pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB'

This makes it very easy to pop open a Terminal window and do:

crush original.png corrected.png

If you’re a Mac user running Tiger or above, Ryan Schenk built a great little Dashboard widget called PNGpong that lets you drag and drop PNG onto it and either create a new image or optionally overwrite the original.  Using PNGs on the Web just became a whole lot easier!

I came across a very good article today on SitePoint about the differences between JPEGs, GIFs, and PNGs. It also explains when you should use each format and why. If you already have already, or ever plan to, put pictures on the Web, you should definitely check out Cleaner, Sharper GIF, JPEG, And PNG Images.