Transparent, small PNGs?

11th May 2004

With reference to Eric Meyer's recent publication More Eric Meyer on CSS, he talks about creating, and more specifically, retaining tranparency when working with PNG images for the web. His example on show at the CSS Garden site:15 Petals highlights the effect perfectly (although not in Internet Explorer).This effect can work in Internet Explorer though; with a little CSS hack. The downside of this is the CSS doesn't validate, which is why 15 Petals doesn't work in IE! Anyway, to apply the hack add this line to the body declaration in your stylesheet:body{behavior: url(png_opacity.htc);}Download a copy of the file here.Next issue? Filesize! Tranparent PNGs can be very large, and when optimising them with image manipulation software like Photoshop, transparency quality, color range etc. start to deteriorate. So, your next step is to head over to pngquant.

pngquant is a command-line utility to quantize and dither 32-bit RGBA PNGs down to 8-bit (or smaller) RGBA-palette PNGs, usually with a significant reduction in file size.

Sounds good eh? Cheers Eric!