Using PNG Images on the Web

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!

Posted Wednesday, October 3rd, 2007 • No comments »
Topics: Web Development

New Phone: Finally, A Bluetooth Sync with Verizon!

First, a small rant (sorry): I’ve been a Verizon subscriber for years and a Mac user for even longer. As anyone in that situation can tell you, not being able to sync your phone with your Mac — especially when there are such killer apps on the Mac for managing your contacts and calendars — is very frustrating. (more…)

Posted Tuesday, April 3rd, 2007 • No comments »
Topics: Miscellaneous

Back to One

Apple Mouse ProIt’s kind of funny, really… one of the most common hurdles for “switchers” has traditionally been the one-button mouse. After all, after using a multi-button mouse, who could ever imagine limiting themselves to only one button? Well, me, for one. (more…)

Posted Tuesday, September 12th, 2006 • No comments »
Topics: Miscellaneous

Shortcuts for Moving, Copying, and Cleaning Up

When I first switched to the Mac, I remember really missing the Windows shortcuts for forcing a move or copy when dragging files from place to place. Well, purely by accident, I just had a “eureka!” moment. I don’t know why I didn’t try this sooner. (more…)

Posted Friday, February 3rd, 2006 • No comments »
Topics: Web Development

New Cinema Display!

My new 23″ Cinema Display is finally here!

23" Apple Cinema Display

It’s seriously like… the most beautiful thing I’ve ever seen. Damn, I’m a nerd!

Posted Wednesday, January 18th, 2006 • No comments »
Topics: Miscellaneous

Browse Happy logo