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:

• http://www.libpng.org/pub/png/apps/pngquant.html
• Platypus
• http://www.libpng.org/pub/png/libpng.html
• http://www.zlib.net/

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
  • Initial effort.  Libs were not statically linked so you had to install zlib and libpng for it to work.  Intel only.
  • http://pngnq.sourceforge.net/index.html
  • http://pmt.sourceforge.net/pngcrush/

In the meantime…

I love to make layouts that scale with the font size. To do this I set a base font size as a percentage and then all other measurements are expressed in ems (with the exception of anything that is a fixed size like images). I read about this approach in this article that demonstrates the percentages resulting in consistent sizing across the major browsers and platforms. These percentages are applied to the body element in CSS:
body {
font-size: 69%; /* 11px */
}

The percentages and their equivalent pixel sizes are:

• 60% = 10px
• 69% = 11px
• 76% = 12px
• 83% = 13px
• 89% = 14px

Lately most of the sites I work on use a base font size of 11px. This can make for some strange looking em measurements. Let’s say I need paragraphs to have a 6px bottom margin. The CSS would look like this:
p {
margin-bottom: 0.5454em;
}

See what I mean? Going to four digits ensures that you get the same measurement cross browser (due to differences in rounding). Actually there’s a simple formula you can use for smaller measurements without pulling out the calculator. Take the number of pixels, subtract one, then place the number next to it that would make nine if added that number. If that didn’t make life easier (hehe) here’s what some common values look like:

• 1px = 0.0909em
• 2px = 0.1818em
• 3px = 0.2727em
• 4px = 0.3636em
• 5px = 0.4545em
• 6px = 0.5454em
• 7px = 0.6363em
• 8px = 0.7272em
• 9px = 0.8181em
• 10px = 0.9090em
• 11px = 1em
• 12px = 1.0909em
• 13px = 1.1818em
• 14px = 1.2727em
• 15px = 1.3636em
• 16px = 1.4545em
• 17px = 1.5454em
• 18px = 1.6363em
• 19px = 1.7272em
• 20px = 1.8181em
• 21px = 1.9090em
• 22px = 2em
• 23px = 2.0909em

It’s geeky but easier to remember than the YUI percentages approach because there is a detectable pattern.

The CSS validator is based on CSSTidy. It comes with some exclusion rules to prevent false positives and you can add your own. I use a couple of CSS hacks/filters, namely “*property” for all IE and “_property” for IE6/5. These regular expressions will prevent the validator from reporting errors related to the hacks. Enter them one at a time at Preferences -> Aptana -> Editors -> CSS -> Validation:

.*unrecognized : \*[-a-z]*: [%\(\)-_'"./?0-9a-zA-Z ]*; for .*
.*unrecognized : \*zoo 1; for .*
.*unrecognized : : for null.*
.*Property _[-a-z]* doesn't exist.*
.*Parse error - Unrecognized .*

UPDATE: I stopped using Aptana years ago when they dropped Ruby support and switched to Netbeans. I was really happy with the change for a long time and then I finally tried IntelliJ again. Really amazing, Hard to imagine what tool could top it but I’m sure I’ll be writing about it in a couple years.
]]> http://morganizeit.com/2008/04/configure-aptana-to-ignore-css-hacks/feed/ 2