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.
Good times ahead
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.
Why IE6 should die now
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.
The stats
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%
The possibilities
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 [1]. There are many web site designers taking advantage of the features of PNG images and building websites [2] 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:
- Greater compression: For most images, PNG achieves a smaller file size than GIF.
- Greater color depths: PNG offers truecolor up to 48 bits, whereas GIF allows only 256-color palettes.
- Alpha-channel transparency: Whereas GIF offers only binary transparency, PNG allows for virtually unlimited transparency effects by enabling an alpha channel for transparency.
Animation generation
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.
Content management system bliss
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.
What does the future hold?
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!