Trouble with Transparent PNG Images

As a website owner, you should check your own website in many browsers online, especially browsers that Google Analytics indicates that your customers are using to make sure that your website looks and works the same for all customers.  I have had merchants come to me many times when they notice in their Google Analytics that orders on some browsers are great and orders on other browsers are never completed and they want to know why.  I will look at their website and find out that their website looks completely different in another browser, or their website was not setup correctly so it does not work in a browser that interprets the code differently.

One thing that has become increasingly popular and more common are PNG images with transparencies.  There are a lot of benefits to using these images including that some elements can load faster because instead of having a background color built into your image, the background color will be part of your page and can load immediately.  Another benefit is if you have an image on top of something else, such as a gradient image around your page content or a seal image over the corner of your page, those images can be transparent. If they are PNG images they will automatically match edges and colors with what's behind them.  The issue with using PNGs is that older browsers, such as Internet Explorer 6, do not support PNGs.  Below is a screenshot in IE 8 on the left and IE 6 on the right.

You see that in IE 8 (left) the image matches the background, because the image is transparent in some parts.  In IE 6 (right) all areas of the image where there should be transparency, instead it is gray. The transparency is not supported in IE 6 and earlier.

Internet Explorer is the default browser on Windows computers, so there is a huge percentage of customers using Internet Explorer to browse the internet. I suggest to merchants that not only do they check current versions of browsers, but also past versions of browsers in case their customers have not upgraded their browsers to the latest versions.  If you are using Google Analytics you can also look at your reports to find out what versions of various browsers customers are using. Log into your Google Analytics account and go to Visitors > Browser Capabilities > Browsers, then click on each browser to see it broken up into versions.  Below is a screenshot of a report in Google Analytics for one of the websites I do regular website work for.  You can see that although version 9 of Internet Explorer is the newest version, over 60% of Internet Explorer customers are using version 8.  There are some customers using version 7 of Internet Explorer, and even some using version 6.  You may think that since it is less than 3% of the customers coming to the website are using version 6, that you don't need to code specifically for IE 6, but if you look at the number of hits, that small percentage accounts for over 100 visitors. That's over 100 people that may be coming to your website and may not want to order because of how the images in the store look.

I hope that this post encourages merchants to take a look at their own store to see if their store is cross browser compatible. Even if you hire third party companies to do your web design, you'll want to test for yourself to see that all of your customers are able to see your site the way that you have it setup.

Browsers I Check:
IE 9, 8, 7, 6, 5.5 (Windows, you can also check between XP, Windows 7 and Vista, because I have seen some differences in the past)
FireFox (Mac and Windows)
Safari (Mac and Windows)
Chrome (Mac and Windows)
Opera (Mac and Windows)
Mobile Phone Browsers

Resources For Checking:
Checking Versions Of IE: http://ipinfo.info/netrenderer/
FireFox Download: http://www.mozilla.com/en-US/firefox/fx/
Safari Download: http://www.apple.com/safari/download/
Google Chrome Download: http://www.google.com/chrome/
Opera Download: http://www.opera.com/download/
View In A Mobile Browser: http://www.marketcircle.com/iphoney/