Today I learned: you can have paletted PNG files with 8-bit alpha

For years I’ve been saving out graphics for websites as either 8-bit PNG or 24-bit PNG. Photoshop always gave me just those two options and so I assumed they were the only two options; if we needed fully transparent backgrounds we used 24-bit and if we didn’t we used 8-bit. IE6 had trouble with 24-bit PNG with the alpha channel so we often just fell back to 8-bit with 1 colour transparent backgrounds. And thats the way things where.

One problem with 24-bit PNG files is the filesize; they’re much bigger than they’re 256-color paletted PNG brothers. I’d just accepted this as a necessary evil and used apps like ImageOptim to try and get some of the extra bytes out of the image.

But it turns out the PNG format offers other options. One of which is a 256-color paletted PNG with full 8-bit alpha channel; which means the smaller file size of 8-bit PNGS but with the awesome full alpha channel of 24-bit PNGS. And due to the way the color palette is made, browsers that can’t display the full alpha channel degrade nicely. Fully opaque pixels are displayed and semi-transparent and transparent pixels are displayed as transparent. Ok so this will lose smooth lines/shadows/etc. but the result will be good enough for IE6.

Photoshop won’t export this type of PNG, but its ex-rival and now brother, Fireworks, apparently does. But a better option will be ImageAlpha made by the same chap Kornel Lesiński who made ImageOptim. I’m not sure how long that app has been online, but he wrote a great blog post explaining paletted PNG files with 8-bit alpha and colour profiles back in 2010.