Main Contents

PNG Transparency In Explorer Without Hacks

July 20, 2008

png8alpha is a droplet app that converts 24bit pngs to 8bit pngs with transparency intact.  These images render normally in modern browsers and IE6 treats them like gifs.  Graceful degradation for pngs!

UPDATE: The latest build is png8alpha-02 (notes)

Usage

Drag and drop a 24bit PNG image onto the application and it will be reduced to 256 colors.  Transparency will be tweaked to achieve the desired effect.  The original PNG will be renamed to FILE.bak.png and replaced with the 8bit image.

Background

I’m a huge fan of CSS sprites, to the point that on a current project I have a single image providing the “chrome” for most of the site.  1bit transparency sucks, so I’ve been using 24bit PNGs for full alpha transparency.  I figured I would solve the Explorer PNG transparency issue later with hacks if possible, or substitute a GIF version for IE6 and below.

Then I came across this article: http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/

Perfect!  IE7+ and others get glorious alpha transparency and IE 4-6 get 1bit alpha like a GIF.  The only GUI out there to do it is Fireworks apparently, which I don’t own and don’t intend to buy.  So I looked into the available command line tools.  After recompiling a few things and sorting out libraries, hacking makefiles, etc. I got them working.  From there I wrote the bash script to string it all together and packaged it up as an app using Platypus.

Issues

  • The app is a universal binary but I haven’t tested it in anything but Leopard.
  • I haven’t got folders working yet, you have to do one image at a time.
  • The color conversion is fixed at 256 colors right now.  You might be able to work around that by doing the palette reduction in your image editor?
  • The conversion is “one way”, e.g. opening the converted files in Photoshop yields surprising results.  Your browser and Preview display the image correctly.

Future Development

  • Get drag and drop folders working.
  • Add the ability to specify the number of colors you want for varying size/quality.
  • Make it backwards compatible with OSX 10.4.
  • Create a Windows compatible app with similar features?
  • Create a Photoshop or Gimp plugin?
  • Suggestions?

Credits

Right now the credits required by all the various licenses are sorely lacking, I’ll correct that soon.  I’ve written very little code myself at this point, just a bash script.  The bulk of the credit goes to these excellent people/projects:

I intend to release the app under an MIT license in the next revision, but for now it’s a YOYO license… You’re On Your Own.

Releases

  • png8alpha-02
    • Dropped pngnq in favor of pngquant because pngnq was dropping bits of highlight color and making things look flat.  pngquant seems to be less destructive in quantizing the color map.
    • No longer using pngcrush since it doesn’t seem to yield more than 1% size improvement and I decided to err on the side of image quality.
  • png8alpha-01


Filed under: Uncategorized | Comments (1)

1 Comment

  1. Morgan July 27, 2008 @ 7:07 am

    I’ve continued searching and troubleshooting and there are lots of improvements to be made. In my tests I’ve found that pngnq doesn’t do so well building a perceptual color table, e.g. gradients are flattened out and critical colors are dropped. I’ve also found that pngcrush doesn’t reduce the size much further in my tests (e.g. < 1%) so I may drop that from the process too.

Leave a comment

Login