...

View Full Version : W3C Transparent PNG's



ahallicks
02-07-2007, 10:54 AM
Has anyone ever noticed that W3C's transparent PNG's that you use to show you page is validated work as transparent PNG's in both IE and Firefox, whereas when I create my own transparent PNG's they don't?

Anybody have any idea how the hell they do it?

Bill Posters
02-07-2007, 11:00 AM
I imagine the W3C PNG is in the PNG8 format (with binary opacity, like GIF89a), rather than PNG24 (with multi-level opacity), which is the one that IE6 and below has issues with.

ahallicks
02-07-2007, 12:04 PM
Ah, so IE utilises the transparency of PNG-8's? I didn't know that, thanks very much!

neomaximus2k
02-07-2007, 01:32 PM
Has anyone ever noticed that W3C's transparent PNG's that you use to show you page is validated work as transparent PNG's in both IE and Firefox, whereas when I create my own transparent PNG's they don't?

Anybody have any idea how the hell they do it?

The PNG is in 8bit format so it keeps the transparency, if you save the PNG as 24bit with a transparency IE doesn't know how to handle it yet FireFox does

VIPStephan
02-07-2007, 02:06 PM
Or to explain it in simple words: If an 8 bit PNG has alpha transparency then it will be displayed like that in modern browsers but IE will make the partially transparent parts 100% transparent.

At least that's a better fallback behavior than making a greyish blue background.

Bill Posters
02-07-2007, 02:35 PM
Or to explain it in simple words: If an 8 bit PNG has alpha transparency then it will be displayed like that in modern browsers but IE will make the partially transparent parts 100% transparent.

At least that's a better fallback behavior than making a greyish blue background.
Afaik, 8-bit PNGs cannot be saved/generated with partially transparent pixels.
Pixels are either fully transparent or fully opaque, no?

Arbitrator
02-07-2007, 09:13 PM
Anybody have any idea how the hell they do it?If you have Adobe Photoshop, you can go to Image > Mode > Indexed Color to save the image as 8‐bit. If you have the GIMP, you can go to Image > Mode > Indexed to do the same. 8‐bit PNG images are undesirable because, like GIF images, you’re restricted to 256 colors and binary transparency.


Afaik, 8-bit PNGs cannot be saved/generated with partially transparent pixels.
Pixels are either fully transparent or fully opaque, no?8‐bit PNG images only support on or off transparency. You need to use 24‐bit PNG images for alpha transparency.

VIPStephan
02-07-2007, 11:15 PM
Afaik, 8-bit PNGs cannot be saved/generated with partially transparent pixels.
Pixels are either fully transparent or fully opaque, no?

That is correct for GIFs. I can save 8 bit PNGs with alpha transparency in Fireworks. The shadow of my navigation on my website (http://vipstephan.de) is an 8 bit PNG (only visible in modern browsers).

Bill Posters
02-08-2007, 12:44 AM
http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_14647

...

Alpha transparency allows an object with a transparent background in these programs to display semi-opaque pixels. Normally an image has to be optimized to 32 bit (millions of colors) color depth to accommodate the Alpha channel. 8 bit PNG files can also be saved with a transparent Alpha if they are saved with a 32 bit color palette. The Adaptive palette in Fireworks is 32 bit, so if a PNG8 is optimized using the Adaptive palette, it will have an alpha transparency.
http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_14647

I never used FW, so that's new to me.

Kinda makes me wonder... If the FW "PNG8" can actually have a 32-bit palette, what makes it a PNG8?
i.e. can/should it really be called an 8-bit PNG /PNG8?

VIPStephan
02-08-2007, 01:13 AM
Hm, never thought about that... I'm indeed using an adaptive palette. It shows the colors with a small "transparency" rectangle... ah just watch yourself: http://i154.photobucket.com/albums/s277/VIPStephan/8bitpng.jpg

Zvona
02-08-2007, 07:10 AM
You happen to know any alternate programs (preferably free) that allow saving partially transparent PNG8's?

croatiankid
02-08-2007, 12:51 PM
steph check your PMs ;)

ahallicks
02-08-2007, 01:39 PM
If anyone is interested there is quite a good work around to allow for transparent PNG's in both IE and FF... the only problem is it is a solution for the present and if IE eventually allow for [] tags in CSS this method will not work. However, the hope would be that, by then they also accept alpha transparency in PNG24's, which would be truly awesome.

The work around, which does actually work too, can be found here (http://www.daltonlp.com/view/217)

Bill Posters
02-08-2007, 05:06 PM
If anyone is interested…

The work around, which does actually work too, can be found here (http://www.daltonlp.com/view/217)

Similarly, if/when invalidating yer CSS isn't going to stop you, then you may as well use this, which targets just the browsers that we know to be a problem…


.blah {
background: url(my_semi-opaque.png);
}

* html .blah {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='my_semi-opaque.png',enabled=true,sizingMethod=scale);
}

(* html rules are ignored by IE7 which supports PNG24 as it should.)


However, it's preferable to shove all that non-standard, proprietory, IE stuff into its own stylesheet and bring that in after the main stylesheet, between some conditional comments (http://www.quirksmode.org/css/condcom.html).

e.g.

main.css

.blah {
background: url(my_semi-opaque.png);
}

iewin6.css

.blah {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='my_semi-opaque.png',enabled=true,sizingMethod=scale);
}

markup

<style type="text/css">

@import url(/main.css);

</style>

<!--[if lt IE 7]>
<style type="text/css">

@import url(/iewin6.css);

</style>
<![endif]-->

This approach is also much more in keeping with the notion… "write it for FireFox then hack it for IE.".

;)

Arbitrator
02-08-2007, 06:53 PM
the only problem is it is a solution for the present and if IE eventually allow for [] tags in CSS this method will not work. However, the hope would be that, by then they also accept alpha transparency in PNG24's, which would be truly awesome.This already happened several months ago. It’s called Internet Explorer 7. It recognizes both attribute selectors and PNG alpha transparency.

ahallicks
02-08-2007, 07:00 PM
IE7 supports attribute selectors? I did not know that... and I use the conditional statement method, which works a treat for less than IE 7

Arbitrator
02-08-2007, 07:06 PM
IE7 supports attribute selectors? I did not know that... and I use the conditional statement method, which works a treat for less than IE 7Internet Explorer 7 added support for more than that. See Web Browser CSS Support (http://www.webdevout.net/browser-support-css) for side‐by‐side comparisons of browser support, including comparisons between Internet Explorer 6 versus 7.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum