I've just been pointed at an awesome tool for making PNGs work better in IE6...
Unlike all other browsers, IE6 doesn't deal well with alpha transparency without the use of messy hacks (no surprise there then!) - when it renders a PNG with alpha transparency, for some silly reason it puts a solid background colour behind the image (usually a grey-ish colour).
In Theme Builder we've got various approaches to dealing with the PNG bugs in IE6. First of all, we've got a bit of JavaScript which runs after the page loads - it goes through ALL images on the page, looking for PNGs and then applies the various hacks (replacing the image source with a transparent GIF, setting it's background-image property to the original image and then applying an IE proprietary "filter" to tell it to render the PNG properly - why it doesn't do that in the first place, I have no idea - stupid IE).
Because the script can be quite slow (it's an extra file to load and JavaScript in IE is really, really slow) we also had to provide an option to turn it off. When the script is disabled, we output GIF versions of the icons instead - this means that we have to:
- check whether the PNG hack is enabled each time an icon is displayed
- have GIF versions of all 800+ PNG icons, almost doubling the size of the plugin (and causing installation issues as a result on some wikis with a MySQL back-end)
- output GIFs regardless of which browser is used because it's too much pain and processing overhead to add that extra logic in to the rendering of each icon
It all adds up to a lot of pain and cruft and bloat, all because IE6 is a disaster of a browser.
However, it turns out that there are some tweaks which can be made to the PNG that make it behave like a transparent GIF in IE6.
I was first pointed (thanks Carl U!) to a little hack that allows you to at least choose what the solid background colour will be when the PNG is rendered in IE6: PNG Degradability.
From there I found a link to a command-line tool called pngquant - apparently if the PNG is saved as 8-bit, IE6 will simply ignore any pixels that have any amount of transparency - in short, the PNG will behave like a GIF image thanks to a bug (yes, another one) in IE6 but still behave as a normal PNG in all other browsers.
From there, I found a link to a graphical front end (I'm not a command-line sort of person) that makes the whole process trivially easy to apply: Manfred.
We've still got a fair bit of testing to do, but if all this works it will be awesome because:
- We can remove 800+ GIF images from the plugin = less files for us to maintain
- Smaller overall plugin file size (800+ GIFs smaller!) so avoiding the MySQL max-packet-size installation issue
- Gives us headroom for adding new icons and plugin features
- Faster plugin building due to having fewer files to package
- When menus are set to "display as quickly as possible" we can still output PNGs and also not have to forcibly disable the PNG support script (something that's bugged us for ages)
- Even when the PNG support script is disabled we can still output the PNG icons as they'll just act like GIFs!
- We can use the PNG icons as background images (something that's needed for a longer-term project goal to replace the menu and pagetree with better HTML/JS) without IE-specific hacks
- We can remove various checks from the menuicon macro, making it cleaner and faster (a benefit that scales up nicely on busy wikis)
- The individual PNG file sizes are significantly reduced as an added bonus
- If menus aren't set to "display as quickly as possible" and the PNG support script is enabled, the PNGs will still render in all their glory in IE6
I'm literally drooling over the prospect of being able to easily use PNG icons in IE6 without mandating vast amounts of cruft!
Added by