April 30th, 2009
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
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.
PS, Photoshop handles all of this perfectly.
I was wrong. Photoshop doesn't permit PNG-8 to have a 2-bit channel as it should, at least in CS3. Not sure if they fixed it in CS4.
Interesting post here:
http://www.brenelz.com/blog/2009/01/27/png-8-alpha-transparency-screencast/
Hey Jeff,
That is actually where I learned this from. I had credited brenelz at the end of my post.
Hope this is fixed in CS4…
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)