Since the dawn of the internet, we have seen numerous improvements in hardware, software, programming techniques, web standards, and just about everything else involved with the creation of a website. An often overlooked yet very important issue is that of web graphic formats. Typically, designers will use the GIF and JPG format throughout their sites without much thought of using anything else. Why? Because that is what we are used to, and it’s easy. If we applied that same way of thinking to page layouts, we would still be stuck in the mid-to-late 90’s using tables for layouts, which is exactly where we are currently with web graphic formats. I feel we are at a point now where we can say goodbye to the obsolete GIF format.
A file format was created in 1996 to improve and replace the standard GIF format, but never really caught on due to lack of browser support. Over a decade later though, PNG is starting to take notice in the web design community, and has finally become widely supported by browsers. A PNG file is superior to a GIF (and often a JPG) in every way. PNGs use a lossless data compression, and yet are still almost always smaller than the identical file in GIF format. Since a GIF is limited to 256 colors while a PNG can be up to 48 bit, one must be very careful to limit the colors included or the file size might become quite large. Because of this, many think that PNGs are much larger than the GIF file size. They are trying to compare a 256 color image to a 48 bit image, thus the
misconceptions.
The transparencies of a PNG are also far superior to a GIF, as they allow for multiple levels of transparencies rather than just ‘on’ or ‘off.’ This opens up a whole new world for web design! Creating multiple containers in order to fake a drop shadow is a thing of the past. With PNGs, you can create a true drop shadow with only one image. The alpha transparencies can be used in a variety of other situations as well; imagine making a site with multiple semi-transparent images with a repeating background. The images will appear to include the background. With a simple background change, all of the
semi-transparent images will also change. This eliminates the need to recreate and cut new images just so they match the new background you applied
(saving you a LOT of work).
Another nice feature of the PNG format is that they can store meta data. This means that search engines will actually search information stored within the image rather than just the image name. This will increase the filesize however, and should only be used strategically in images such as logos or other definite branding images.
Browser support for PNG today is very good, with the typical exception of Internet Explorer 6. IE6 can display an index colored PNG fine, but has issues when working with alpha transparencies. The browser actually supports transparencies inherently, but it is not enabled. As a designer, will need to use certain “hacks” in order to get them to display properly.
While it might be a little more work, in the long run it is definitely worth it to use PNGs in my opinion. The next time you shift-ctrl-alt-s (save for web) in Photoshop, please keep all of this in mind before you automatically hit that GIF button.