Here are the instructions how to convert png24 images into png8 for ie6 goodiness,

all through the commandline using open source tools (i think)

pngquant +pngout + pngcrush

firefox & transparent PNG 8 & gradient background = 

IE6 & transparent PNG 8 & gradient background = 

updated removed full images as there sensitive

First off…

Failures

Tried imagemagick it turns transparency into a bit mask….

Tried pngopti, it’s a black box that doesn’t tell you what it’s doing

Tried pngcrush, it lies when converting to 8 bit png’s and doesn’t do this if the pallette’s over 256 colours

Tried pngout, it does well but fails when the pallette isn’t smaller 257 colours

Now the good part

Solution

Solution a combination of tools

step one

-> quantise image into 256 (so basically png8′s look crap with large sprites or sprites with a large colour range)

I used pngquant

$bash -

pngquant 256 some_24_bit.png

step two

-> convert image form a png24 to a png8 (many tools claim to do this, many tools lie… or fail unexpectedly pngcrush! I trusted you)

I used pngout got the linux executable here pngout-static from this excellent blog

(unfortunately if the number of colours in the needed by the image is greater than 256 it fails hence the first step)

$bash -

./pngout-static -c3 -d8 -y -force some_24_bit.png some_8_bit.png

step three (optional)

->compress image for fun and profit or simply just bandwidth savings

I used pngcrush

Couldn’t find linux executable -> compile instructions

$bash -

yum –noplugins gcc-i386

yum –noplugins xz

xz -d pngcrush-BLAH.tar.xz

tar -xf pngcrush-BLAH.tar

cd pngcrush-B:AH

make install

./pngcrush –help

here’s one I made earlier only tested on the bbc’s forge sandbox, no promises given, if it doesn’t work build your own one, instructions above

So compress image using pngcrush

$bash -

./pngcrush some_8_bit.png -bit_depth 8 -brute -rem alla -reduce some_8_bit_small.png

whola -> png8 with progressively enhanced IE6 transparency

Without fireworks!!! see what you can do with a little locked down machine and a VM

whoope!!!

and the results….

Firefox 3 (beatiful… ps i cheated slightly and did this screenshot on a mac so the fonts look prettier)

IE 6 (ok it’s not perfect but the designs really like gradiented backgrounds… ah to build the thing in flash)

PNG 24

PNG 8

Zap