PNG-8 with alpha transparency

I learned a new web trick today.

Apparently, Photoshop’s inability to save PNG-8 with alpha transparency is not a limitation of PNG-8 but a limitation in Photoshop.

For years, I have been operating under the assumption that I need to use PNG-24 to achieve transparency effects in my web projects. This is usually a compromise in terms of file size and browser compatibility (requiring ie-specific hacks). But it doesn’t have to be…

[Enter Fireworks]

Fireworks to the rescue:

  • Open your big Photoshop-exported PNG-24 with nice alpha transparency in Fireworks.
  • Change the file format to PNG-8.
  • Change the transparency option to “alpha transparency”
  • Rebuild and export your PNG-8
  • Revel in the MUCH smaller file size

Bonus points for ie6 compatibility!

Learned this from Brenelz’s screencast which was linked on NetTuts

5 Replies to “PNG-8 with alpha transparency”

  1. PNG-8 permits only a 2-bit transparency channel, meaning either it’s transparent or opaque, period. PNG-24 permits an 8-bit transparency channel, with smooth gradients. They are not equivalent, and PNG-8 will only have positive visual results with sharp edges.

  2. Both in CS3 10.0.1 and CS4 11.0.1 I get the option of saving transparency with PNG-8. I am now officially confused… Yes, it is 1-bit transparency, but that makes sense, since it’s a reduced bit-depth version of PNG. Oh wait, I see, Fireworks plays with the details of the spec better!

    http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/

    http://en.wikipedia.org/wiki/Portable_Network_Graphics#Ancillary_chunks

    (Sorry I was so reactive and misspoke about 2-bit vs. 1-bit; the only place where you were off is that PNG-8 does support 1-bit transparency in Photoshop)

Leave a Reply to Jeff HarmonCancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.