Introduction
PNGs are great, having a full 8 bits of alpha transparency makes designing web pages so much easier. That being said, I’m sure anyone reading this post is well aware of the gross inadequacies of Internet Explorer 6 in terms to the rendering of PNGs. IE7 has remedied the situation, however, according to Google Analytics, 6% of the visitors to this website still use IE6, and the situation is much worse for our company website where a full 37% of visitors still use IE6. My point is, if we want to take advantage of the features PNGs give us, we have to account for the IE6 users.
We are in luck, koivi.com has a write up on how we can use the Microsoft specific “DXImageTransform.Microsoft.AlphaImageLoader” css filter to load PNGs properly. The short version is, our image tags that used to look like:
must now look like (for IE6 only):
To make this process easier, I’ve written a Ruby on Rails method that handles the details for us.
png_tag
png_tag is the little brother of image_tag. It is actually two functions, first a function (ie?) to determine if the client is using IE, and if so what version. The second function (png_tag) acts just like image_tag, except when passed a png it will automatically use the DXImageTransform.Microsoft.AlphaImageLoader filter if the client is using IE6.
The first function is as follows:
This is a pretty rudimentary check, it just looks for “MSIE” in the user agent, if it finds it it returns the number after it (the version) otherwise it returns nil. Now that we have the ability to see if our user is using IE, we can tackle the second function:
If this code looks a lot like the code for “image_tag” that because it basically is “image_tag” with the IE6 check. If we find IE6, we simply change out the image source for a spacer and add the filter code. Since it also checks that the source image is a PNG before adding the filter, you can use png_tag everywhere you would have used image_tag.
My Image Doesn’t Show Up in IE?!?
I forgot to mention, there is one caveat. The “DXImageTransform.Microsoft.AlphaImageLoader” doesn’t automatically size your “img” tag. So your image is showing up, it just happens to be 1 pixel by 1 pixel (the size of our spacer). This just means you have to specify to the size of your image ahead of time (a good practice anyway).
In the case where the programmer doesn’t specify the size, you could use this code to determine it at run time. I decided not to for my code, but keep that in mind if it is a feature you really need.
Using png_tag
I thought about bundling this as a plugin, but it just seemed like overkill. If you want to use png_tag, simply copy the two functions above into your application_helper.rb file, and copy the following spacer into your images directory:
right click here to save the 1x1 pixel spacer image.
I hope you find this code useful!
