[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. -- Sergiu Dumitriu http://purl.org/net/sergiu/
So... nobody has an opinion about this? I can do whatever I want? Sergiu Dumitriu wrote:
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.
-- Sergiu Dumitriu http://purl.org/net/sergiu/
+1 for C Thanks, Marius Sergiu Dumitriu wrote:
So... nobody has an opinion about this? I can do whatever I want?
Sergiu Dumitriu wrote:
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.
+1 for C, and A2 would be ok too. Marius Dumitru Florea wrote:
+1 for C
Thanks, Marius
Sergiu Dumitriu wrote:
So... nobody has an opinion about this? I can do whatever I want?
Sergiu Dumitriu wrote:
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.
_______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
Sergiu Dumitriu wrote:
So... nobody has an opinion about this? I can do whatever I want?
Sergiu Dumitriu wrote:
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
What kind of security restrictions? the thing is, IE6 is mostly surviving in companies, where internal web tools (intranets et all) are setup with various security restrictions. What I'm fearing is that we'll fix this like this and it would not work for the cases where it would be actually needed. Thanks, Anca
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.
Anca Luca wrote:
Sergiu Dumitriu wrote:
So... nobody has an opinion about this? I can do whatever I want?
Sergiu Dumitriu wrote:
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
What kind of security restrictions?
the thing is, IE6 is mostly surviving in companies, where internal web tools (intranets et all) are setup with various security restrictions. What I'm fearing is that we'll fix this like this and it would not work for the cases where it would be actually needed.
I don't know for sure, but I remember the yellow annoying little infobox that started appearing after SP2 was installed in XP any time a web page contained some "potentially dangerous" elements, like SVG images, and which you had to click to enable those elements. After a quick search on the net, it seems that HTCs are not among those dangerous elements, so they should work. I also didn't find any setting in IRs options for disabling HTCs, so maybe I was too hasty warning about security restrictions. I am not an expert here, so maybe someone working in a typical company which enforces IE6 can give some feedback.
Thanks, Anca
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.
-- Sergiu Dumitriu http://purl.org/net/sergiu/
participants (4)
-
Anca Luca -
Marius Dumitru Florea -
Raluca Stavro -
Sergiu Dumitriu