The 24-bit PNG image format has held a ton of promise for so long. It promised designers the ability to have true alpha transparency for their images so that they could save files once and put them over just about any background color or pattern and they'd look great. Generally, PNGs save as reasonably small images too.
However, Microsoft's Internet Explorer browser has been the albatross around designers' necks. Versions 5 and 6 had no support for 24-bit PNGs and they dominated the market for so long that it seemed like we'd never move beyond using the simplistic transparency of GIFs. Then Firefox changed the game by not only supporting PNGs (something the previous iterations of Mozilla browsers did too) but by becoming popular enough to make the use of PNGs tangible. Even more importantly, Firefox's growth pressured the elephant in the room to follow suit. Now, Internet Explorer 7 supports transparent PNGs and it's quickly replacing its predecessor as the dominant browser.
At this point the vast majority of people are using browsers that support the transparent PNG. Huzzah! The critical mass has been reached and I believe it's finally over the top for the PNG.
Pownce, the latest project I've been working on, is the first major site I've designed that makes extensive use of transparent PNGs. You'll notice the background images on all of the sub-pages are subtly transparent over the graphical page backgrounds. PNGs are being used in several other important places as well, both for effect and for ease-of-use. It's been extremely fun and liberating to finally have the confidence to use PNGs like this. I already plan on moving further in this direction and some projects for Digg that haven't yet seen the light of day will be using PNGs as well.
I think the prudent designer isn't going to deprive IE6 visitors of a good user experience with regard to PNGs. Just leaving those poor lost souls people to ugly patchy images isn't acceptable. However, rough edges to images if you save an equivalent GIF for each transparent PNG is hardly a major drawback for these people. I believe it's an acceptable trade-off.
I'm certainly not one to be on the bleeding edge with new technologies (at least most of the time) and I think that's why I feel so good about starting to use transparent PNGs more frequently — they're not bleeding edge anymore. PNGs are ready (and maybe they've been ready for quite some time) for truly mainstream adoption by the entire web design community.
Comments
Jeff O'Hara - July 2, 2007 3:30 pm
Great explanation of your decision to go with PNG's instead of gifs. Great read.
Saiger - July 2, 2007 3:33 pm
Cool great read.
Dugg as well: http://digg.com/design/Daniel_Burka_s_final_push_for_the_jump_to_24_bit_PNG_s
Adam - July 2, 2007 4:22 pm
I use them most of the time when I'm doing site building.. In fact for anything other than photographs I'd rather use PNGs.
-A
Ryan Merket - July 2, 2007 8:50 pm
That is exactly my same reasoning, written perfectly.
Dwayne - July 3, 2007 1:22 am
Good points... I can't see any reason not to fully adopt them as the new ruling image format.
This mainly due to the fact that in the meantime, while we wait for IE 6 to admit defeat / roll over and die, there are some good javascript fixes out there... though it will be a beautiful day when every viable browser provides out-of-the-box support.
Kalle - July 3, 2007 11:07 am
replace 24-bit with 32-bit..
it's RGBA (32-bit) that ie 6, 5 doesn't support..
alex - July 3, 2007 5:35 pm
ive been using pngs exclusively in lossly format images for about a year now. i couldnt be happier. i wish my camera supported it, for the times when i dont want to shoot in raw.
Kristi Sparks - July 4, 2007 9:23 am
I'm a new PNG user....
Just wanted to say thanks for working on Pownce; I joined today and think it's a great concept!
Kristi - July 4, 2007 9:24 am
I'm a new PNG user....
Just wanted to say thanks for working on Pownce; I joined today and think it's a great concept!
Aaron Schoeffler - July 4, 2007 1:39 pm
This may be a dumb question, but how does one support both PNG-capable and non-PNG-capable browsers simultaneously? Do you just compare the browser id and send a transparent gif or a transparent png depending? I can't imagine it's that simple.
Aaron Schoeffler - July 4, 2007 1:41 pm
And I just have to add:
"Burka Burka, Mohammad Jihad"
Daniel Burka - July 4, 2007 2:33 pm
Aaron: I'm only filtering for IE6, so I set the PNG as a background in CSS and then use the * html hack to choose a different background, a GIF, for IE6. As for your second comment above, I'm not at all sure why you 'had to' do that.
Paul Kim - July 5, 2007 4:34 am
Just set up an account on Pownce, Daniel, and really impressed by the design work. Gratz!
Bryan Bartow - July 7, 2007 3:54 am
Reading posts like this remind me of why I love Flash so much. Most every platform, OS and browser render my stuff just like I designed it. Even though it's not always necessary, I design in Flash if at all possible, just so as to not have to mess with "hacks" to support the most basic of design constructs. Give me Flex, Flash and AIR and I'll be just fine.
Doug - July 7, 2007 9:23 pm
Well put. Now if Only IE would get going and adopt the PNG format AND the :hover technique divs or anything besides anchor links.
Alex - July 7, 2007 10:23 pm
All that is left now is to rid the world of jpegs (hopefully people will use pngs to replace non-transparent graphics too). I'm always using pngs and my schooled web design buddy is always getting up me because of it. Nice read.
Andy Baker - July 8, 2007 8:43 am
Bryan - thats fantastic for you. For your users I just hope you are implementing selectable text, bookmarking, back button support and support for opening pages in new tabs/windows on every page.
Coz I've watched a lot of users get confused when a Flash site doesn't work 'properly'.
Andy Baker - July 8, 2007 8:52 am
alex - why on earth would a camera want to support the huge file size increases in return for the imperceptible quality gains that would result in going from low-compression jpegs to pngs? pngs for flat synthetic images is one thing but jpegs excel at real world compression (ok maybe newer lossy formats have an edge but non-RAW lossless?)
Martín - July 9, 2007 7:16 pm
PNG sliding transparencies are very CPU-intensive for old computers. In mine, for example, scrolling through Pownce is a pain.
Anyway, you could use the old trick of AlphaImageLoader in IE6, instead of using ugly GIFs.
Jeroen Sen - July 12, 2007 3:07 am
Like Martin, there is a simple trick (which in a form also fixes the :hover problem in IE6). One can use behaviours (.htc) files to automatically fix the transparency problem. As seen on the site I mentioned above there are no other modifications made to the site other than adding a tag for the img element to the css file (see source) and adding a blank 1x1px gif. Et voila, transparent png's can be used without any problem and will be shown just as designed in a wide range of browsers.
(Do not mind the size of the images on this page, it is only shown as an example of the usage of the behaviuor file.)