Which is superior, CSS transparency or PNG Transparency?

Question

Should I use PNG transparency or CSS transparency?

My first instinct is to go with CSS. However I heard somewhere that the filter in IE is slow and that I would get better results with PNG (ignoring IE6).

However from personal experience I know that PNG transparency is slow in FF3.

Is there a definite answer to this?

Thanks.

Answer 1

They're two different solutions to two different problems. CSS transparency (I assume you're referring to the opacity property) will make an entire element (its border, background and content) transparent, whereas alpha PNG transparency is only useful in situations where you'd use images, for example an elements background.

I cant think of many situations where you could use either to the same effect.

There are of course RGBA colours in CSS3, however browser support is currently too low for it to be a viable option in public facing sites/applications.

P.S. I can't say I've run into any FF3 alpha PNG performance issues myself.

---

Follow-up to comment:

OK. In that case I'd go for the CSS opacity property.

Although the filters performance may not be optimal in IE6, it means you don't have to waste bandwidth and an additional HTTP request on an image. Plus, if you wanted to get the image to work in IE6 as well you'd have to use AlphaImageLoader, which I'm sure would be just as slow (if not slower) than the alpha filter.

Answer 2

PNG transparency can do things CSS can't -- PNG alpha channel transparency can have different degrees of partial transparency for different parts of the image, while CSS opacity can't do that.

Answer 3

I just did a quick non-scientific test in Firefox 3.0.11 on the mac.

My test was to overlay a div and scroll up and down repeatedly.

One used css:

background: #000; opacity:0.8;

The other used a 10px 24bit PNG of the same.

I measured the following results with Activity monitor (so guessing,not exact)

Firefox 3.0.11

CSS opacity: approximately 60% cpu usage.

PNG: approximately 20% cpu usage.

Safari 4.0:

CSS opacity: approximately 80% (with peaks of 120%!)

PNG: approximately 76% (with no peaks at all)

So as far as performance goes, it seems like a PNG is the winner.

Answer 4

Although CSS is probably the "proper" way to go, I think PNG is safer, easier, and better implemented.

Answer 5

there are MEMORY LEAKS in IE (including 8) when using png 24 bit! please beware.

http://robertnyman.com/2009/05/26/serious-memory-leak-issue-with-24-bit-png-images-with-alpha-transparency-in-internet-explorer/

I used pngs with some jquery to slide some text and the script is dead slow! I removed background pngs and the script is fine.