Feature
Post

Category
Design


Do you use PNGs?

For the longest time, I stayed away from using PNGs (Portable Network Graphics) because of the lack of support for it on Internet Explorer 6. Supposedly superior to GIFs- offering smaller file sizes and support for more than 256 colors- it was frustrating to not be able to use PNGs and many others agreed with me.

As we near the end of 2009 now, I wonder: is it safe to use PNGs?

Because IE6 doesn’t support it, the first question has to be: how many people are still using IE6? Here’s a recent screenshot from w3schools,

browserstats-2009

that shows 10.6% of IE6 users last month. The number is certainly dwindling, down from 18.5% at the beginning of the year- but is it small enough to “forget” these people?

Not that you have to forget them: we can:

Either of these methods might very well work for you, but they’re still added steps and added code, just to be able to use PNGs.

Designers, is it time to go all-out with the PNGs? Do you use them exclusively or in conjunction with GIFs and JPEGs in your designs?


  1. By Picard102 posted on November 25, 2009 at 11:58 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Those numbers should be taken with a grain of salt. Their numbers are obviously skewed towards a certain audiance. That being said, supporting IE6 shouldn’t be part of anyones job anymore.

  2. By kevinn posted on November 26, 2009 at 2:22 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Use ‘em. The question is:

    How important is IE6 for your site/project?

  3. By Alex Flueras posted on November 26, 2009 at 6:09 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Definitely yes! I am now using them for more than a year with Superslight plugin and it works like charm. I could not imagine future website designing without png’s.

  4. By anders p posted on November 26, 2009 at 6:15 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Been using all png’s and no gif’s since 2007. Hav’nt done IE6 specific stuff since then either.

    I run a 2 mio pageviews/month site aimed at people between age 25-50. Regular people, your mom and you know.

    How will things evolve if people are’nt pushed towards evolution.

  5. By Daoro posted on November 26, 2009 at 8:09 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Two simple statements :
    1) IE6 DOES support PNG.
    What it lacks is the support for the transparency channel. So you can use PNG files and have them displayed correctly in IE6 if the image doesn’t have any transparent area.

    2) I’ve stopped developping sites for IE6.
    People have to understand their browser is too old, and that they should update. With a simple conditionnal comment I put a clear warning and explanation for those still using IE6. Trying to display sites correctly in IE6 won’t push people to update and won’t help getting rid of this obsolete browser.

  6. By Markus Thömmes posted on November 26, 2009 at 3:48 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    As Daoro already mentioned you can use PNG in IE. Even in IE6. Just remove the “gamma” value from it’s Metas and you will have all PNG displayed properly. Only the transparency needs a fix but PNG8 also has advantages in size.

  7. By Timothy Long posted on November 26, 2009 at 9:09 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I no longer cater to the IE6 bunch. It is admittedly with a bit of laziness and egotism that I gave up on them, but look, the user who sees no problem with manning an obsolete browser is likely to miss the intricacies of a well-designed website anyway. Sure, that’s probably overgeneralizing, but I think it’s time to bite the bullet and think futuristically.

  8. By Matt posted on November 26, 2009 at 11:41 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I’ve been using pngs for a couple of years because of the cool effects you can create using transparencies. I have previously used pngFix on projects but on my latest project I’m going to experiment by creating a lo-fi IE6 version of the site and using using universal IE6 css (http://code.google.com/p/universal-ie6-css/). They will still get all the content but it will just be mostly dull looking text.

    Also there will be a message to poor IE6 user saying the site is best viewed on a modern browser and to start hounding their IT Department to upgrade.

  9. By Michael Aringer posted on November 27, 2009 at 8:38 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Yes, I do – after reediting them with the tool tweakpng!

  10. By Stewart posted on November 27, 2009 at 8:10 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    If it is simple enough to make a site backwards compatible (such as the conditional statements) then why not ?
    You would never want to dump that much of your audience unless it is a developer/designer targeted site, then tell them to get a better browser =p

  11. By David posted on December 1, 2009 at 6:32 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I use PNGs if I am needing some subtle transparency or if the file size is smaller than GIFs. IE6 is used by a small percentage of people and they usually come from specific demographics. If you aren’t targeting those demographics, then I don’t see the harm in using PNGs.

  12. By Lorraine Nepomuceno posted on December 1, 2009 at 7:23 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    @Daoro and @Markus, thanks for pointing out that it’s the PNG transparency that isn’t supported by IE6.

    @Michael Aringer, thanks for mentioning tweakpng, which I hadn’t heard of before. For those interested, you can get this PNG editing tool here.

    @David, I agree that as designers we should always keep our target demographics in mind.

    And thanks, everyone else, for your comments- I do feel more confident to use PNGs now.

  13. By Ryan posted on December 2, 2009 at 1:59 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    For me, it depends on what I have in front of me. Some themes on WordPress may have a thumbnail resizer that will only work with PNG’s, some with only JPG’s. I do try to put emphasis on using PNG’s as they are more lightweight, you can use transparency and amongst other things, I just love using them. As far as IE6 users, any way that we can encourage people to upgrade is always a good thing.

  14. By Hunter posted on December 3, 2009 at 5:54 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Sadly, I was digging through my analytics on some of the sites I manage and still had about 15 – 20% IE 6 usage. More than Firefox and Safari combined, so for those who are saying to push their audience to it- it just not that simple from a business standpoint. You have a site that looks weird or doesn’t render correctly, you are risking losing a sale or lead or some other business transaction that may be the whole reason for your site. Try telling the CEO that the reason their leads are down with their new site and they are getting complaints is that the users need to upgrade their browsers and that you shouldn’t be developing for the browser used by 20% of their customer base. (and dang all if those IE6 users didn’t have a 30% higher conversion rate to boot!)

    Just a reminder to really seek out the answers as to whether or not it is worth it to support IE- you may find you still should or you may find you have the data to justify kissing it bye-bye. But much credit to Digg, YouTube and others that are taking the lead to remind people to upgrade. I look forward to the day I can freely use PNGs without hacks that jack everything else up.

    Until then, I’m still in GIFville.

  15. By Ryan Williams posted on December 5, 2009 at 5:06 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Yep, IE6 is still a large part of the audience and while I have absolute empathy for those who want to drop support, the simple fact of the matter is that you’re not putting out a quality product if there’s no IE6 support there. Not getting it looking exactly the same as in other browsers is one thing, but to not even test in IE6 and ensure basic support is a terrible idea IMO if it’s for a commercial project. Personal projects? Eh, who cares.

    With regards to PNGs, everyone should be using them now for the graphics that you’d have used GIFs for in the past — they have made GIFs completely obsolete and there are literally no downsides if you don’t use the alpha transparency of PNG-24 (PNG-8′s GIF-like hard transparency works fine in IE6). In almost all cases a PNG will be considerably smaller in file size than its GIF counterpart.

    Note that you should experiment with both PNG-8 and PNG-24 in Photoshop as they use different algorithms, and certain patterns (mostly gradients) are smaller PNG-24.

  16. By ShelleWeb posted on January 2, 2010 at 10:33 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    As has been mentioned previously, PNGs can be used when designing for IE6 in mind, and I have been using PNGs over GIFs (unless animated) for years now too. This sure has helped on many occasions in cutting down the overall size of web pages.

    I still do cater for IE6 users, as I do all users, as with my role I need to consider equal accessibility to online services for all people, and IE6 is still used by enough people to warrant the extra time and effort to meet their needs. Although we regularly monitor the statistics, for each new development and upgrade, to ascertain our audiences needs.

    So, as has been said above, research your audience, and factor in the cost of catering for IE6 against the cost of not!

  17. TrackbackTweets that mention Do you use PNGs? | Devlounge -- Topsy.com