in IE6, transparency in PNG24 are not supported unless we use a ugly CSS hack. We all know that.

But using the TweakPNG software (http://entropymine.com/jason/tweakpng), we can change the default background color IE6 uses when transparency is not supported, while not changing anything for browsers supporting transparency and not using any CSS trickery.

So we can choose any fallback color instead of the default gray.

Since the toolbar background is black, we can set the background to black so the crappy gray around PNG will vanish. Much better !

See attached screenshots and the modified toolbar.png (this is the version without shadow used in #535066: Use CSS3 / IE filter to render toolbar shadow).

CommentFileSizeAuthor
#3 png-ie6-after.png82.47 KBjide
#3 png-ie6-before.png67.18 KBjide
#3 pngs.tar_.gz6.11 KBjide
toolbar.png401 bytesjide
ie6-after.png10.82 KBjide
ie6-before.png10.87 KBjide

Comments

seutje’s picture

seutje commented

hmm interesting, hadn't considered it, but perhaps we should also be looking at techniques like the one described on http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/

jide’s picture

jide commented

Interesting technique !
I'm just concerned how aliasing will render this way.

As discussed on IRC with seutje, either we use :

- The TweakPNG trick and have a black background as a default for IE6. Would render nicely, but only if the toolbar background stays black.
- Or the Fireworks technique we get a PNG8 transparency fallback. Aliasing may be less smooth, but would work on any background.

#2 may be the best compromise.

jide’s picture

jide commented
StatusFileSize
new pngs.tar_.gz6.11 KB
new png-ie6-before.png67.18 KB
new png-ie6-after.png82.47 KB

Yay ! The fireworks technique works pretty well. We should do that for all transparent PNG images, in all modules and themes.

Attached images correct the toolbar, overlay and shortcut modules, and the Seven theme.

Edit : The toolbar image used is the one without shadow used in #535066: Use CSS3 / IE filter to render toolbar shadow.

seutje’s picture

seutje commented
Status: Active » Needs review

sweet, looks a lot better imo, still ugly, just less :D

sry I wasn't able to help out with this, don't have fireworks at home

marking as needs review

jide’s picture

jide commented

Needs some more work to cover all images, but having a first review would be cool.

jide’s picture

jide commented

And.. Yes does not look sharp, but hey, that's IE6 ;)

mcrittenden’s picture

mcrittenden commented

Sub.

dman’s picture

dman commented

I spent ages one day imagining this should be possible. Image editors do support a 'matte' color even on transparent areas, so I hoped that would show through. But after messing with a dozen approaches and applications, I still ended up with silver on IE6 ... sometimes.
It's good news if someone has really cracked it. It seemed like it would be easy in theory

jide’s picture

jide commented
Title: Make transparent PNG24 suck less in IE6 with a simple and hack-free trick » Use PNG24 images that degrade to PNG8 on IE6

A better title.

jide’s picture

jide commented

@dman : Yes it's a really neat technique. It's not theory, it works ;)

ff1’s picture

ff1 commented
Status: Needs review » Needs work

As this is 6 months old, some of the images in #3 are out of date, so marking as needs work.

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Status: Needs work » Closed (won't fix)

IE6 is dead. We shouldn't waste time working on this now.