PNG Images, Transparency & IE6: Answers To Theming-Hell

Bevan Rudge

on

January 29, 2008

PNG Images, Transparency & IE6: Answers To Theming-Hell

I would never use a drupal module or javascript to fix IE6 suckiness with transparency in 24-bit PNGs. After battling IE6 and image transparency on many sites I always do one of three things when tackling this issue:
  1. Firstly, if only binary transparency is required, I use an 8-bit PNG file. Binary transparency means that each pixel is either transparent xor colored (but not both, hence 'xor' for the eXclusive-or. When can we add 'xor' to the English dictionary?). The pixels in a 24-bit PNG can be both colored and transparent, and have 'alpha' transparency as opposed to binary transparency. 8-bit PNGs are essentially the same as GIFs, but use an open and free standard and are usually a bit smaller in file size than 24-bit PNGs. Like with GIF files you can limit the number of colors in the pallet of an 8-bit PNG to anything less than 256 colors, this can significantly reduce the size of a file (and quality if you are not careful). You can't do that with a 24-bit PNG. Most of the time using binary transparency with an 8-bit PNG is sufficient to solve the IE6 transparency issue. For example if the edges are all square (horizontal or vertical), no anti-aliasing is required and the matte color also doesn't show. Even for images with odd edges, if the background color is white, mostly white or near-white, binary transparency is usually sufficient. (Matte, in this context, is the fictitious background color that anti-aliasing uses to blend the edge of an image into it's would-be-transparent background. It defaults to white at file-creation-time in most software. Advanced image editors let you choose it. 24-bit PNGs don't need a matte color because they have a whole alpha channel with 256 unique levels of transparency for this very purpose.) However if more complicated transparency is really required, then I look at options 2 or 3.
  2. If the image is part of the content of a website, like logos, calls-to-action, sometimes buttons, many branding images, 'badges', ads or content images, then it will go in an <img /> tag and I implement Microsoft's proprietary AlphaImageLoader filter in an IE6-fixes CSS file.
  3. If the image is NOT part of the content but is decoration, such as a tab, header, background, border, rounded corner etc, then I create two copies of the file;
    • a 24-bit PNG for all the decent browsers
    • an 8-bit PNG for IE6
    I replace the image in the background-image CSS property in the IE6-specific file. I usually choose the matte carefully for these images.
Very rarely you might come across the edge case where a background image has multiple dissimilar background colors, or even changing background colors. This is where IE6 really bites the dust and is a great argument for progressive enhancement over graceful degradation. I other words, you might need to take the design back to the drawing board, or even better advise your users to upgrade to a Better Browser. All of this might seem automated and clear enough to turn into automated code such as a drupal module or javascript. But no. Here's why I wouldn't use a module or javascript to fix IE6's lack of support for the alpha transparency channel in 24-bit PNGs;
  • Implementing the AlphaImageLoader filter on logos always (in my experience) requires custom tweaking to make sure the filter's mode is correct and optimal, the element you apply it to 'hasLayout' (another awful proprietary member of the DOM element by microsoft), and is the correct height and width.
  • In the case of 3, you can't make a 24-bit into an 8-bit client-side. Server-side you can but it's difficult. However server-side it's as-good-as-impossible to know what matte color to choose. Only the designer and/or themer can effectively select the matte.
  • Additionally it's very tricky to use the AlphaImageLoader filter to replace css-background images and almost always requires tweaking for each use. Additionally, implementing the AlphaImageLoader filter on elements that contain links and form elements (like the elements you're likely to apply css-background-images to) breaks said links and form elements. They become un-click-able.
  • Last of all, you'll notice that with the above solutions you can fix most cases simply by choosing between 24 and 8 bit PNG files correctly. Sometimes some CSS is required, but typically this is only a few lines per site.
Is it worth the client-side processing overhead that the required javascript invokes?

Share it!