PNG-8 with alpha transparency

I learned a new web trick today.

Appar­ent­ly, Photoshop’s inabil­i­ty to save PNG-8 with alpha trans­paren­cy is not a lim­i­ta­tion of PNG-8 but a lim­i­ta­tion in Pho­to­shop.

For years, I have been oper­at­ing under the assump­tion that I need to use PNG-24 to achieve trans­paren­cy effects in my web projects. This is usu­al­ly a com­pro­mise in terms of file size and brows­er com­pat­i­bil­i­ty (requir­ing ie-spe­cif­ic hacks). But it doesn’t have to be…

[Enter Fire­works]

Fire­works to the res­cue:

  • Open your big Pho­to­shop-export­ed PNG-24 with nice alpha trans­paren­cy in Fire­works.
  • Change the file for­mat to PNG-8.
  • Change the trans­paren­cy option to “alpha trans­paren­cy”
  • Rebuild and export your PNG-8
  • Rev­el in the MUCH small­er file size

Bonus points for ie6 com­pat­i­bil­i­ty!

Learned this from Brenelz’s screen­cast which was linked on Net­Tuts

5 Replies to “PNG-8 with alpha transparency”

  1. PNG-8 per­mits only a 2-bit trans­paren­cy chan­nel, mean­ing either it’s trans­par­ent or opaque, peri­od. PNG-24 per­mits an 8-bit trans­paren­cy chan­nel, with smooth gra­di­ents. They are not equiv­a­lent, and PNG-8 will only have pos­i­tive visu­al results with sharp edges.

  2. Both in CS3 10.0.1 and CS4 11.0.1 I get the option of sav­ing trans­paren­cy with PNG-8. I am now offi­cial­ly con­fused… Yes, it is 1-bit trans­paren­cy, but that makes sense, since it’s a reduced bit-depth ver­sion of PNG. Oh wait, I see, Fire­works plays with the details of the spec bet­ter!

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

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

    (Sor­ry I was so reac­tive and mis­spoke about 2-bit vs. 1-bit; the only place where you were off is that PNG-8 does sup­port 1-bit trans­paren­cy in Pho­to­shop)