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.
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.
Love the post! This makes it too easy, and what a small file size. I am surprised this isn’t more well documented.
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.
cool technique – me like !
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.
Yes Joren, I am Canadian eh? lol
There must be some other program that can convert 32-bit PNGs to 8-bit PNGs and still have fair transparency?
REALLY makes me wish I had Fireworks. I think I need to pick that up one of these days.
Don’t ask me how they work as I have never tried them.
It’s really nice approach, but really lowgrade the image quality and don’t even think using with gradients.
This is good stuff dude. Very handy. I need to get hole of Fireworks. Thanks a lot.
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.
[...] 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 [...]
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 ?
I’m trying with Photoshop CS3 and Fireworks CS3 and it’s not working.
[...] 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 [...]
it doesnt work….im on cs4, it looks bad
[...] Visit Article [...]
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 [...]
Hello, how You test IE6 in Firefox?
Which complement you use?
[...] PNG-8 Alpha Transparency – Works in IE6+ [...]
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 [...]
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!
To save some time for everybody, here is my simple test and the result:
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?
Great tutorial! I’m working with transparent PNG’s all the time and glad you could explain this so well! : )
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..
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.
Great post! Thanks!
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…
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.
I recommend you to take some video editing classes your video is way to long. You can fit this all information in 1 min.
[...] 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 [...]
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)
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! [...]
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:
[...] получите. Способ номер семь (с использованием 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 [...]
This is lost on me. Why would anyone want to restrict themselves to an 8bit color pallette? What does this really solve?
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. [...]
Thanks mate, great information, just what I needed.
Cool accent you have.. lol
[...] this from Brenelz’s screencast which was linked on NetTuts [...]
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?
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 [...]
[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.
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.
Thanks for the screen cast.
It makes a big difference for us non-Photo-suite people.
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 [...]
[...] Brenelz – PNG8 alpha transparency screencast [...]
Thank you for sharing this article, İt is really Helpful, Thanx/3/26/2011 12:02:40 PM
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
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!
This is exactly the solution I was looking for. Simple, and effective. Many thanks for sharing.
If you have a Mac, then you don’t need Fireworks, there’s ImageAlpha converter which even gives better quality.