Goodbye GIF, hello PNG

Posted on Friday, February 23rd

One of my early lessons as a designer on the web was that different image formats were better at different things. A photograph always looked best as a .JPG (or pronounced "j-peg") on screen. Logos, and anything with transparency, words and larger areas of color worked best as a .GIF (or pronounced "gif"). This has held true for a long time.

There was one little problem with .gifs though. The image format is privately owned and royalties are somehow due somewhere to someone whenever you used a .gif format. This little catch didn't stop me, or everyone else using them from stopping.

Then another image format was released - the .PNG (or pronounced "ping"). This format was not privately owned and sought to replace .GIFs on the web forever. PNGs have everything going for them including an alpha transparency channel which allowed for the image to be anywhere from completely opaque to completely transparent. Great!

Wait, not so great. Internet Explorer (at least everything before version 7) cannot process the alpha channel! PNGs look like complete crap in Internet Explorer. Since 95% or more people use it as their main browser.....well, flush that idea.

There is still hope.

Microsoft was kind enough to acknowledge this problem and even create a little work-round filter for this oversight/bug on their part. It involves a little javascript to fix, so its not perfect by any means. Users with javascript support turned off will still see the crappy looking PNG with no transparency whatsoever.

While the on-going effort to make 100% compatible and adaptable pages is a noble and worthy cause, there are moments when you have to let go and accept that real-world usage won't make this a problem.

That said, here is the javascript code that makes PNGs behave. I downloaded it from Bob Osola's website: http://homepage.ntlworld.com/bobosola/index.htm

This particular script (there are plenty out there) runs through the given page looking for images with the .PNG extension. Any that it finds it replaces with a new HTML element that employs the filter to the image. It works pretty well if all you need to do is repair images on a page. If you need to apply this fix to either image maps or navigation rollovers that use PNGs, there more of Bob's generosity found here:

http://homepage.ntlworld.com/bobosola/pnginfo.htm

Good luck, and enjoy using PNGs on your own pages to give you much needed graphic freedom.

Bookmark this post:

Keep it Clean, Simple & Elegant

The web is confusing enough already.
Designing thoughtful websites that deliver information quickly and easily while providing a pleasant web experience to all visitors. That's the Sites by Joe way.

View the Website Portfolio

The proof IS in the pudding. Beautiful, hand-crafted websites that are lovingly created from scratch. See for yourself some of the custom websites that I've designed and developed for my clients in Southern New Jersey and many points around the globe. View the website portfolio.

Want to work with Sites by Joe?

I'm passionate about the web. I love creating websites and it shows in the results. I'd enjoy hearing about your project and discussing ways we can bring your ideas to fruition.

This dedication to service and results brings many new referrals and inquiries. At the same time I try to only focus on a couple projects at a time. That said, it would be wise to get in touch ahead of time to start the dialog for your new website. Work with me