Re: [xwiki-devs] [VOTE] Use PNG instead of GIF for the silk icons

Hi devs, Short version: we need to replace GIFs with transparent PNGs for the Silk icon set. 3 options: A. use "filter: AlphaImageLoader" in our CSS, time consuming for our devs B. serverside content negotiation to send GIFs only to IE6, doesn't really fix the problem for IE6 C. use a third party library that handles this for us, but does not work under certain security restrictions Long version: Originally, silk icons are PNGs, with alpha transparency. The problem with them is that in IE6 they don't display nice, since they have a gray background. So, instead we're currently using GIFs, but this approach has some big issues: - GIFs are indexed, so they have at most 256 colors out of the millions possible in PNGs. This is not such a big issue, since most icons don't use so many colors. - PNGs are smaller (in bytes) than GIFs. - Since gifs don't have alpha transparency, they have an almost-white border around the colored pixels, which makes them ugly on non-white backgrounds (this is obvious on really dark backgrounds). This is a real blocker for using darker themes in Colibri. Now, switching to PNGs directly is not a good option, since most of our end users are (forced to be) using IE6. Some tricks are possible: A. Change the CSSs to contain a filter which enables the PNG transparency. This can be done in several ways: A1 - manually (hard for developers, breaks CSS validity) A2 - automatically at build time (breaks CSS validity) A3 - dynamically in the SkinAction (won't work if the CSS is served by the container) The advantage is that we can control which images are transformed. The disadvantage is that it might not work under certain security restrictions. B. Implement a kind of content-negotiation trick that sends PNGs or GIFs depending on the user agent. This is easy to do with a few Apache HTTPD settings, but it's not cross-platform at all. We can also do it in the SkinAction, but again, doesn't work if the request does not pass through it. The advantage is that it always works, since it's always an image. The disadvantage is that icons will continue to look ugly in IE6, since they are GIFs. C. Use http://www.twinhelix.com/css/iepngfix/ which automatically fixes all images in IE. The advantages are that it is the most easy solution to implement, with the least amount of effort, it fixes most problems, and requires little maintenance. The disadvantage is that it won't work under certain security restrictions, and that a clean and fast integration will requirer to add some mechanism of identifying which images to fix (it can be incompatible with other tools that do their own PNG fix, like Google Maps). None of the alternatives is perfect, but my personal preference goes to C.