PDA

View Full Version : Semitransparent PNGs in Windows



Twey
08-05-2006, 02:02 AM
I guess this is a graphics issue, although the solution, if one exists, is likely to be CSS...
A script I'm developing, at http://www.twey.co.uk/?q=rubberband, uses translucent PNG images for the background, for Opera support. This is fine on a white background, but under Windows, the demo version with a black background (http://www.twey.co.uk/includes/rubber/demo-inv.html) doesn't display the background over the black, although if one looks closely one can see its effects on the white text.

Is there any known fix for this?

boogyman
08-05-2006, 02:28 AM
png files take up an immense amount of space, so I would suggest exporting it into a gif or jpg format

Twey
08-05-2006, 02:38 AM
I would suggest reading the question before posting. If you know of a way to make GIF or JPG do alpha transparency, please do tell me.

Besides, PNG can have a substantially smaller filesize than GIF (although obviously not JPG), especially if run through something like Pngcrush (http://pmt.sourceforge.net/pngcrush/) (if you're using something like Photoshop, I'd guess; it doesn't seem to yield a great advantage over the GIMP's output).

Also, for what it's worth, I'm dealing with single-pixel images here, with a total filesize of 91 bytes each.

mburt
08-05-2006, 02:55 AM
I've noticed though, that PNG's make the image a bit darker, which can kind of screw things up if your doing say, a graphic or something with the same background as the page. Which brings us back to the orignal issue. If you could make them transparent, that wouldn't be a problem :)

Twey
08-05-2006, 03:21 AM
That's due to gamma correction, a rather kludged idea that went on to be poorly implemented :) See http://hsivonen.iki.fi/png-gamma/ for some more details.

They are transparent :-\ That's not the problem. The problem is that on Windows, the black background isn't compensated for and they're totally invisible.

blm126
08-05-2006, 04:15 AM
They look exactly the same to me.Checked in Opera,IE,and firefox because you didn't specify

Twey
08-05-2006, 02:52 PM
It does look exactly the same, in every browser on Windows. Try viewing it in another operating system.

Maybe I should provide screenshots.

/EDIT: Here we go, this (http://www.twey.co.uk/images/chalk.jpg) is what it looks like on Linux.
Here (http://www.twey.co.uk/images/chalk-windows.jpg) is a mock-up of how Windows displays it.
I don't know if Mac OS X will display it properly or not. I'd suspect so, but I'm not sure.

shachi
08-05-2006, 06:09 PM
Works fine for me too. Tested in firefox 1.5(latest stable version)(windows xp)

Twey
08-05-2006, 07:22 PM
I know it works (other than some odd border-width issues), but the problem is that it doesn't look like this (http://www.twey.co.uk/images/chalk.jpg) on Windows.

shachi
08-05-2006, 07:28 PM
Twey, it does(At least in my computer).

Twey
08-05-2006, 07:46 PM
It does? (blink)
Oh, excellent. Must be a brightness thing -- I'll just up the opacity on the images.

Brilliant, thank you :D

shachi
08-05-2006, 08:15 PM
My pleasure to help you.:)

shachi
08-05-2006, 08:25 PM
Is this what you wanted to see Twey??

http://img300.imageshack.us/img300/360/snpshtab4.png

http://img300.imageshack.us/img300/360/snpshtab4.png


By the way it being displayed huge in windows with FF as well as IE.

Twey
08-05-2006, 09:44 PM
Yes, that's the one, thank you :)
"Huge" is fine. :)

shachi
08-06-2006, 09:00 AM
Here are the IE and Opera snapshots.

http://img204.imageshack.us/img204/8840/snpsht2zp9.png

http://img204.imageshack.us/img204/8840/snpsht2zp9.png

http://img204.imageshack.us/img204/4079/snapshot3uu1.png

http://img204.imageshack.us/img204/4079/snapshot3uu1.png

Twey
08-06-2006, 02:39 PM
I believe you! :)

shachi
08-06-2006, 03:03 PM
Thanks.:)

ItsMeOnly
08-20-2006, 08:28 PM
The problem is with windoze's implementation of PNG format, which was stuck at 0.98, while most recent release is 1.2- which implements 24-bit alpha blending- can't help it, IE7 is the only one to support full transparency

Twey
08-20-2006, 08:33 PM
Nope, it was definitely the monitor brightness. I just added some opacity, and now it looks fine :)

blm126
08-20-2006, 09:41 PM
The problem is with windoze's implementation of PNG format, which was stuck at 0.98, while most recent release is 1.2- which implements 24-bit alpha blending- can't help it, IE7 is the only one to support full transparency
Not true, IE6 can be made to support PNG alpha transparency through filters(I hide them behind conditional comments)

ItsMeOnly
08-20-2006, 09:52 PM
Not true, IE6 can be made to support PNG alpha transparency through filters(I hide them behind conditional comments)
Thus confirming my last statement :)

http://www.libpng.org/pub/png/png-sitemap.html#images

djr33
08-21-2006, 09:10 AM
About OSX....
It works just fine in Safari (i'm running 1.3.2)
It works fine in Firefox (1.5.0.6)

IE, on the other hand, has issues, but it does with many scripts... the script is the issue, though, not the transparency. Nothing happens... just some T's you can highlight or not. If you'd like to recode to just show the transparency, I could test that, but I doubt it's worth it.
(v 5.2.3)

Twey
08-21-2006, 04:47 PM
Nothing happens... just some T's you can highlight or not.Bah, I've made some changes since then, it's probably just IE having a fit again. I'll have a look at it later.

djr33
08-21-2006, 11:28 PM
It's IE 5. Only basic scripts work with it. I'm not at all surprised.

blm126
08-21-2006, 11:33 PM
Do you only have IE 5?

Twey
08-21-2006, 11:53 PM
He runs a Mac -- Microsoft never released IE6 for Mac.

djr33
08-22-2006, 12:09 AM
I'd be curious if they did release it to see if 6 (or 7) had the same problems :p

Also, I have a PC too, blm, but I'm just testing on my mac for Twey as he was curious if it worked on OSX.

blm126
08-22-2006, 03:52 AM
Ah, I see. I was kind of confused why you would be using IE 5.