PNG‑8 with alpha transparency

I learned a new web trick today.

Appar­ent­ly, Pho­to­shop’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 does­n’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!

    (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)

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