“The time has come,” the Walrus said, “to use PNGs on your web site.”
OK, maybe he didn’t say that. But the time has come, anyway. Although PNG (Portable Network Graphic) images are a better technology than either GIF or JPG, Internet Explorer was slow to adopt its transparency feature. But starting with IE 7, which came out several years ago, IE supports it. (IE 8 is the current version, and IE 9 is already in public beta). The reason I was reluctant to use PNGs when building web sites is that there were still a lot of people using IE 6. But we have to cut IE 6 loose, and this is as good a time as any. (If you want to help put IE 6 out of its misery, go to www.ie6nomore.com and add their code to sites that you build.)
What transparency feature am I talking about? Well, GIF images allow transparency for only 1 color and can have a maximum of 256 colors, JPG images don’t allow any transparency at all and can have 16.7 million collors, but PNG allows 16.7 million colors and multiple-color transparency, for a mind bending 4.3 billion colors.
Look at the drop shadow in the examples below (yellow background added to make the transparency obvious). Since the GIF applies transparency to only 1 shade of white, it produces an odd-looking halo around the drop shadow. The JPG version allows a full color drop shadow, but it doesn’t allow transparency, so you can’t see the yellow background. But the PNG version has the best of both: lots of color levels and full transparency. (If you’re viewing this page with IE 6, the PNG will look the same to you as the GIF. Time to upgrade!)
 |
 |
 |
This comes at a price. The GIF image is 15 kb, the JPG is a paltry 7 kb, but the PNG weighs in at 25 kb. If you’re only displaying one image, this isn’t a big deal. But if you have a lot of images and you think that some visitors to your web site might not have broadband connections, you might want to use PNGs only where necessary.