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?

Buyer

Do they work for people who let them choose the browser installed on their office computer? – Reeves

Who's voting to close and why? – Darrickdarrill

@David I think what you were saying is that the people still running IE6 don't do it by choice - their corporate environment demands it of them. – Martinsen

That's indeed an interesting point. But I would quit any such day job that sucks so much that I can't even surf the good way. – Buyer

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 :)

Darrickdarrill

IE6 is finally dying... Google has been killing support for it and hopefully someday soon we can focus all our griping on IE7/8 quirks and shortcomings (XHMTL is 10 years old, and IE9 is finally adding support for it--now that MS has made it one of the most abused standards around), and IE9's minimal HTML5 support – Roughandready

When IE6 is finally pronounced dead, I'm throwing a massive party. – Darrickdarrill

I think it depends on the developers. If they say it's dead, it will be. – Buyer

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.

Transubstantiation

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.

Geomancy

Answer 4

The only pain is IE6 but since that isnt rly supported anymore (or atleast, when u open IE you get a popup to move to edge) its not a problem.

If you rly rly wanted to support IE6 then you could use an npm package named dd_belatedpng: https://www.npmjs.com/package/dd_belatedpng

Polacca