Is it okay these days to use PNG with alpha-transparency in websites?

Question

I remember from 3 years ago that it was an absolutely huge pain to use any nice PNG with alpha in websites, because of IE6 and other bad browsers.

But how about now? How about if your target audience are iPhone, iPad and iPod Touch users? I believe these people aren't so stupid to use old-aged bad browsers. They use the newest, best stuff they can, and they're tech-savvy and intelligent. Is this an valid assumption? So does this mean I can safely use PNG with alpha to create great websites for my apps without having to worry about uglyness?

Answer 1

Yes it's absolutely fine to use PNG's with Alpha Transparency. It actually always has been, you just had to fix IE6 with filters.

So go ahead and use them :)

Answer 2

When I have to use alpha-transparent PNGs, I like to handle older browsers with DD_belantedPNG.

Then you can set up an IE conditional to call the PNG fix on the specific elements you need.

    <!--[if IE 6]>
        <script type="text/javascript" src="/lib/js/DD_belatedPNG-min.js"></script>
        <script type="text/javascript">
            DD_belatedPNG.fix('#Logo a img');
        </script>
    <![endif]--> 

You probably want to avoid blanket PNG fixes that apply to all PNGs on the page.

Remember, if you don't need the alpha-transparency 8-bit PNGs will work everywhere.

Answer 3

There are several JS libraries that will add support for transparent PNGs in IE6. I use pngfix.js: http://jquery.andreaseberhard.de/pngFix/

There is also a standalone version of that plugin if you aren't using jQuery.