PNG-8 Alpha Transparency

"

Part of my job duties is to always strive for optimization. Lately I got even more encouraged as I read through the optimization book that my boss gave me, which I highly recommend to anyone interested in the subject.

Thus, the majority of graphic elements we use on slashdot interface today is css sprites. We split it further into two css sprite images, one is for chrome elements, another is exclusively for gradients.

PNG-8

By definition, I thought, PNG-8 is a format of a binary transparency; that is a pixel is either fully transparent or filled with colour. So after reading the aforementioned book and running into this screencast, nothing could stop me from trying PNG-8 alpha transparency.

Adobe Photoshop (CS3) cannot save your image as PNG-8 with alpha transparency. And since I don't have Adobe Fireworks, I had my co-worker convert my PNG-24 file saved from Photoshop CS3 to PNG-8 with alpha transparency. At first, I was disappointed, because I opened the file that my co-worker sent, in Photoshop. It looked messed up, it appeared to be converted to binary transparency. I then tried opening the file in Firefox and it appeared normal. That's when I recalled that Photoshop cannot read PNG-8.

Encouraged, I committed my file to main repo and decided to test. Surprisingly, visually, I saw no visual difference, which was fantastic news. But what's the point of it all? What benefit doesn't PNG-8 bring over PNG-24? Let's look at the size of our css sprite PNG-24 file on live site vs. our new PNG-8 file:

((a43f4aa...))$ git checkout live
Switched to branch 'live'
(live)$ ls -l | grep cs_s
-rw-r--r--    1 vladkulchitski  staff  26461 Nov 24 12:45 cs_sic_controls_new.png
(live)$ git checkout master
Switched to branch 'master'
(master)$ ls -l | grep cs_s
-rw-r--r--    1 vladkulchitski  staff   9534 Nov 24 12:46 cs_sic_controls_new.png
(master)$

So we're looking at two files, original is 26461 bytes, new one is 9534 bytes! That is an amazing saving for high traffic website. Thus, I shaved 16927 bytes (that is 36%) from the file without losing the quality.

As for Adobe Fireworks, don't be sad if you don't have it. You could use pngnq free command line tool:

$ pngnq -n 128 -v -s 1 -g 1.0 -f cs_sic_controls_new.png
$ ls -l
13:14:27 vladkulchitski@f1vladmbp:optimization$ ls -l
total 160
-rw-r--r--  1 vladkulchitski  staff   9704 Nov 24 13:12 cs_sic_controls_new-nq8.png
-rw-r--r--  1 vladkulchitski  staff  26461 Nov 24 13:07 cs_sic_controls_new.png
$

It appears that PNG-8 alpha transparency is definitely a way to go for some design elements. We couldn't however use it for gradients css sprite because of the posterization depth.

p.s. Another advantage of using PNG-8 alpha transparency, which many may not care about anymore, is that it will display properly in IE6. It will recognize binary transparency, instead of ugly gray color.

|