Winnipeg Web Design
a winnipeg website design company.
a winnipeg website design company.
Inspired by a comment on my previous blog post titled, PNGs, PNGs, and more PNGs I have decided to record a 15 minute screencast to show you how to use PNG-8 for transparency.
PNG-24 is what most web developer’s use for transparency on the web. It tends to have large file sizes but provides excellent transparency. Using PNG-8 or GIF for transparency doesn’t work near as well… at least normally! There is actually a way to use PNG-8 transparency that is better than PNG-24.
Some benefits are that most of the time it results in smaller file sizes. PNG-24′s are huge culprits of being massive and being a real pain for visitors with a slow internet connection. As well as this, PNG-8 Alpha Transparency actually renders decent in IE6, so no need for those css/javascript hacks to get it to look right.
The trick involved here is that you cannot simply use Photoshop. You have to use Fireworks to create the effect needed. View the screencast above to get shown exactly how to do this!
I suggest you view PNG-8: The Clear Winner if you are looking for more information.
rkirk92 Says:
Love the post! This makes it too easy, and what a small file size. I am surprised this isn’t more well documented.
Matt Hill Says:
Wow, that’s pretty cool. How does it work — does it saves an 8-bit palette plus an alpha channel? I didn’t know you could do that with a PNG.
I exclusively use Photoshop, but this could be one really good reason to get hold of Fireworks now. I hate having to use hacks for IE6!
Thanks for the information, great stuff. 
myows Says:
January 28th, 2009 at 10:18 am
cool technique – me like !
Joren Rapini Says:
January 28th, 2009 at 10:38 am
Beautiful dude! I would’ve left out the DD belated part of the screen cast since that was kind of off on a different tangent from the rest of the post, but I definitely just used this trick.
I agree with rkirk92, I’m amazing this hasn’t showed up before now.
BTW, are you Canadian? Trying to figure out your accent haha.
admin Says:
January 28th, 2009 at 10:39 am
Yes Joren, I am Canadian eh? lol
Brian Says:
January 28th, 2009 at 11:12 pm
There must be some other program that can convert 32-bit PNGs to 8-bit PNGs and still have fair transparency?
Chris Coyier Says:
January 28th, 2009 at 11:59 pm
REALLY makes me wish I had Fireworks. I think I need to pick that up one of these days.
admin Says:
January 29th, 2009 at 12:02 am
I think there might be other ways to do it such as PNGCrush (http://pmt.sourceforge.net/pngcrush/) and pngquant (http://www.libpng.org/pub/png/apps/pngquant.html)
Don’t ask me how they work as I have never tried them.
Clavel Macias Says:
January 29th, 2009 at 11:51 am
It’s really nice approach, but really lowgrade the image quality and don’t even think using with gradients.
Ariyo Says:
January 30th, 2009 at 12:08 am
This is good stuff dude. Very handy. I need to get hole of Fireworks. Thanks a lot.
Ethan Gardne Says:
You can do the same technique WITHOUT Fireworks using open source tools. All you have to do is save in photoshop as png24 as you did in the video and then use pngquant to convert the image to png8.
February 1st, 2009 at 12:06 pm
[...] wenig Problemen übersteht. 2. Und hier noch nen Screencast von Brenelz Web Solutions zum Thema transparente PNG-8-Bilder. PNG-8 ist wesentlich kleiner als PNG-24 und untersützt auch Transparenz und damit sind auch [...]
jitendra Says:
Is this only possible in Firefox CS4 or any version in Firefox?
Is this can be used for every thing where we need transparency or just at limited places ?
jitendra Says:
I’m trying with Photoshop CS3 and Fireworks CS3 and it’s not working.
February 2nd, 2009 at 10:27 am
[...] http://blog.brenelz.com/2009/01/27/png-8-alpha-transparency-screencast/ [...]
[...] exploit some proprietary features of IE6 to enable PNG transparency. But here is a an interesting screencast from Brenelz’s Web Solutions which looks pretty interesting. It’s basically a way of [...]
rob Says:
it doesnt work….im on cs4, it looks bad
[...] Visit Article [...]
Pieter Says:
It looks cool, but its very limited tho. For example you can’t use it for gradients…
[...] transparancy in IE6 with no hacks Hmmm, i just stumbled over this screencast PNG-8 Alpha Transparency (screencast) :: Brenelz’s Web Development Tips :: Winnipeg Web Development It shows how to use a transparent png, without any scripts/hacks. And it displays pretty much fine [...]
Guilherme Says:
Hello, how You test IE6 in Firefox?
Which complement you use?
Tks.
[...] PNG-8 Alpha Transparency – Works in IE6+ [...]
Tom Says:
Didn’t work for me! 
Photoshop CS4 & Fireworks CS4.
Created some text in PS with drop shadow, saved as transp. PNG24. Opened it up in Fireworks, changed it to PNG8 w/ alpha transp., rebuilded it and exported. But no shadow in IE6.
Tested in Multiple IEs, IE Tester & browsershots.org.
To be sure, tested with css hack (DXImageTransform.Microsoft.AlphaImageLoader…) – that worked flawlessly.
So is this solution gimmick?
[...] use fireworks and the PNG-8 format to achieve transparency in any browser without a hack or fix. http://blog.brenelz.com/2009/01/27/png-8-alpha-transparency-screencast/ Feb.06, 2009 Author: Jake [...]
Liviu Mirea Says:
It worked for me. Be sure to save it from Fireworks in “Flattened PNG” format, not “Fireworks PNG” as I did the first time. It’s really great for stuff like rounded corners with transparent backgrounds because it works in IE6 (checked with IETester and MultipleIEs) and it’s also a bit smaller in size. The downside is you can only use 256 colors.
Thanks a million!
Matt Says:
To save some time for everybody, here is my simple test and the result:
http://alpha.revellabs.com/png8test/result.png
Tom Says:
Liviu Mirea, tried your solution, but still no dice.
I must be doing something wrong.
Could you please write step-by-step what you do?
SOS Media Web Design Says:
February 9th, 2009 at 11:14 am
Great tutorial! I’m working with transparent PNG’s all the time and glad you could explain this so well! : )
Mcometa Says:
February 11th, 2009 at 10:10 pm
thank you for this screencast! this is great. however you should’ve written your conditional statements this way:
notice the space in between IE and 6 ^_^
hope that helps..
Ethan Gardner Says:
February 13th, 2009 at 6:49 pm
If anyone is interested on doing this without using Fireworks, I have posted a tutorial as a follow up to my earlier comment: http://www.ethanandjamie.com/blog/37-user-interface/81-png8-transparency-without-fireworks.
Ryan Says:
February 20th, 2009 at 4:10 am
Great post! Thanks!
Jecci Says:
February 23rd, 2009 at 2:32 pm
Get to the point! Gosh! You talked for the first 10 about things we all already know! Why 15 minutes when it could have taken only 1 minutes if you just get to the point… Thanks for the info but took way too long in the tutorial… Just FYI…
OH my goodness Says:
Do you sometimes even know what you do and how to use a computer?
You should train several times before you record something.
E.g. Looking up the filesize in properties when having Vista with statusbar in the window – why did you do that?
15 Minutes for a 2 Minute info – can I get my time back?
So the PNG24 has 12 Kb and with PNG8 we saved about 8 Kb. Err, no. The JS has 5,41 Kb (geek, how do I know that? maybe statusbar?) and means an extra HTTP-Request. So you save 13,41 Kb plus some bytes in your Markup and a Request.
Too long video with no details.
F-
Paulius Says:
I recommend you to take some video editing classes your video is way to long. You can fit this all information in 1 min.
Paul
[...] implement, but if you want to avoid them all together, it is a little-known fact that Fireworks can save PNG-8’s with alpha transparency. 3) Is there a way to remove the “Click to activate this control” message for some [...]
Nick Morss Says:
Brenelz, this the best thing i have seen in a long time! thank you so many times. your workaround is to provide a more manageable approcah to supporting the living dead (IE6)
X Says:
I couldn’t stand your voice until the end, looked like you were about to puke.
[...] PNG-8 Alpha Transparency for IE6 – PNG supprt for IE6, rejoice! [...]
Jason Says:
I used the Fireworks solution on the following page (the right-side vertical image), and it works great. The shadow effect shows a few artifacts on IE6, but not too bad. When I upgraded my IE, I got a beautiful shadow. Too bad 80 percent of Web users are still hooked on some version of IE.
Here’s the page:
http://www.sacog.org/rucs/
[...] получите. Способ номер семь (с использованием Adobe Fireworks, на англ). Что еще дальше, [...]
[...] a developer from being able to take advantage of simple things like PNGs. Sure there are numerous PNG hacks and other ways to get IE6 to behave like a modern browser, but why are we still [...]
Jackson Says:
This is lost on me. Why would anyone want to restrict themselves to an 8bit color pallette? What does this really solve?
Cappix Says:
Does this method work with drop shadows?
I have a slice the needs to repeat 7 with drop shadow, but it doesn’t seem to render the drop shadow.
@jackson I think this is a good alternative to hacks or alerting the users to upgrade. With this method, IE6 users are still able to use your site but at a cost (ugliness). This way, you can also provide an alert letting them know it is time to upgrade their browser if they want things to look better.
[...] For a quick bonus I have included Brenelz, who is a good friend of Dev-Tips and myself. Brenelz constantly has experts in the field of php and other languages guest posting on his blog with their tips, as well as great tips from the man himself. After all, Brenelz was the one who first showed me how to use a transparent png-8 without needing any hacks for IE6. [...]
Rasmus Says:
Thanks mate, great information, just what I needed.
Cool accent you have.. lol
[...] this from Brenelz’s screencast which was linked on NetTuts [...]
Hiran Says:
hi, This is working perfectly! i created png8 version from Photoshop also and then got same output as what u get from fireworks. but quality is less. so can’ t i find solution for this?
Hiran Says:
ya if we use hack option with png8 that quality issue will solve like png24.
[...] PNG-8 Alpha Transparency with Fireworks – fireworks, css, png, fix, transparency [...]
ephra Says:
[quote]Be sure to save it from Fireworks in “Flattened PNG” format, not “Fireworks PNG” as I did the first time.[/quote]
What do you mean? There’s no option to save in flattened png when you export it to png8.When you just save the image, yes, then you can choose flattened, but then it’s no png8, but a very very large ‘normal’ png.
…it doesn’t work for me at all, still get that horrible ugly border and a red cross in the image.
Tobias Says:
Thank you for this tip, it works great! In a heavy graphic design site that was using PNG 24 had about a total of 620kb. Using this trick it went down to about 205kb.
I was using Fireworks CS3, made the changes like in the video and picked Export. I don’t care about IE 6 anymore, was only interested in this trick because of the filesize.
Jason Says:
Thanks for the screen cast.
It makes a big difference for us non-Photo-suite people.
me Says:
Good god man, you could have created a 30 second video for this tip. Do you have down syndrome? That was EXCRUCIATING to sit through! This is why noobs should not do screen casts. Further, and yet another reason noobs shouldn’t be doing screen casts; PNG8 is EXTREMELY limited in its uses and you didn’t even talk about that.
Unfortunately, other noobs will view your screen cast and think this info is incredible… but that’s like the blind leading the blind.
[...] Thanks to Brenelz and his screencast. [...]
[...] Doors meets CSS Sprites by FiftyFourEleven Watch a screencast. There are some other methods, such as PNG Quant for Windows, PngThing for Mac etc [...]
November 8th, 2010 at 10:02 am
[...] Brenelz – PNG8 alpha transparency screencast [...]
Julia Stone Says:
Thank you for sharing this article, İt is really Helpful, Thanx/3/26/2011 12:02:40 PM
Julia Stone Says:
Thank you for sharing this Article, really helpful and easy understandable, i saved ur blog,i ll follow thnx/4/6/2011 8:00:17 PM
Electric Grill Griddle Says:
A wonderful article you posted. That is so informatory and creative.
Please keep these excellent posts coming. You helped me so much.
Thanks for sharing!
Paula Says:
This is exactly the solution I was looking for. Simple, and effective. Many thanks for sharing.
Salmon Whale Says:
December 13th, 2011 at 8:03 am
If you have a Mac, then you don’t need Fireworks, there’s ImageAlpha converter which even gives better quality.
Twitter
Follow me on Twitter to keep up to date!
RSS Feed
Keep up with all of our updates by subscribing to our RSS feed!
FaceBook
Join our group on Facebook and become a fan of us!