The gif image format, one of the icons of the web is dying but not fast enough. The gif image format with its transparency ability should be replaced by the PNG format. Why is it still being used when with PNG only your imagination is the limit for creating killer web designs? The answer is older browsers, especially IE6.
PNG does smooth anti-aliased shapes with transparent backgrounds. This makes it easy to create wonderful web designs.
The good news is that almost all modern browsers fully support PNG images, including the alpha-channel transparency. Safari, Firefox , Opera , Netscape and Mozilla all support the alpha transparency in PNG image format. The bad news is that the one browser that hold a significant part of web browser use statistics Internet Explorer 6 is still among the living.
Internet Explorer 6 and lower do not support the alpha-channel transparency built into the PNG format. But there are plenty of javascript and css fixes for older browsers. Here lies the key to the revolution of a new type of web design. Once IE6 is completely and truly put aside in favor of the more supportive IE7 and its rival web browsers like Firefox web designers will no longer hold on to the use of gif images.
How long do we have to wait before IE6 is dead? According to the latest statistics IE6 holds only slightly over a 25% share of web browser use. Internet Explorer as a family is losing ground to Firefox but IE7 is still looking good as the dominate successor of the Microsoft browser group. Hopefully IE6 usage will fall below 10% by the end of 2008 with statistics below 18% before that being the last coffin nail.
Market Share in June 2008 Internet Explorer, All Versions 73.01%
Internet Explorer 4 0.01%
Internet Explorer 5.0 0.07%
Internet Explorer 5.5 0.07%
Internet Explorer 6 26.38%
Internet Explorer 7 46.45%
Internet Explorer 8 0.03%
As you can see by the example PNG image format transparency looks good on any background making a designers job easier and giving more possiblilties for creative use of PNG transparency in web design. There are many web site designers taking advantage of the features of PNG images and building websites that would never have been possible before. The images shown below would have been loaded into photoshop and flattened into a jpeg. But here a more flexible design is made using PNG transparencies and CSS.
Example:
PNG is a freely available format without the baggage of patent law hanging on it and offers several practical advantages over GIF for the web designer:
The one area the that gif has over png is in animation. But gif animation is being replaced by vector graphics animation like microsoft silverlight, adobe flash and javafx. Even in the area of banner advertisement gif animation is falling to the more prefered flash and video hybrid methods.
How will all of this effect content management systems? CMS template makers and theme designers will be able to create better and more flexible web designs. They will be able to reuse their designs without having to recreate hundreds of small graphical nuances. A perfect demonstration of the coming phenomenon is the Drupal CMS default template. The Garland template allows the user to change colors and look of the entire wesite. This would not be possible without the PNG image format and its ability to give true transparency to opaques, gradients, rounded corners, diagonal shapes, knockouts and fading.
It will be fun to see just what designers come up with when they have tools that do not limit what they can do artistically on the web.
Happy Publishing!
Here’s how you can contribute to the IE6 demise:
http://www.savethedevelopers.org/
I’ve done that on behalf of my company at http://www.delaneylocks.com
It looks like your own site is being held back by IE6 with it’s own design which isn’t really that interesting looking.
Recently I have one simple rule when coding web sites. I make sure it looks the same in FF, IE7, Opera, Safari. Then when I’m finished I run IE6 see what can be fixed quickly by putting some _zoom: 1 into iesucks.css and fix it.
If something can’t be eaisly fixed I just hide it,and write that you have to upgrade your veery old browser if you want full functionality.