Feature
Post
Category
Design
Published Wednesday November 25, 2009 at 11:38 pm
By Lorraine Nepomuceno
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,
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:
- Use jQuery plug-in, like the Supersleight plug-in, pngFix, or the aptly named ifixpng. You have to hope, of course, that javascript isn’t turned off- and even then, you’ll have unstyled content.
- Use CSS and conditional comments.
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?
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.
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?
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.
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.
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.
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.
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.
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.
Want an avatar? Get a gravatar! • You can link to this comment
Yes, I do – after reediting them with the tool tweakpng!
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
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.
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.
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.
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.
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.
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!