firefox rendering .png's differently than other browsers... Options

[GTAV6]

is it just my computer, or does ff always render .png files darker than other browsers? it's really irritating me! could it be something i'm doing wrong when i create the .png files? (like creating a new graphic from scratch as opposed to rehashing an existing file, for example)
if i change all the graphic components to .gif's, everything looks identical right across all the browsers, so it's only .png's that are affected.

to see what i mean, the site i'm working on right now (linky), looks like it has a black overlay in ff, whereas in opera, ie and chrome, it looks exactly like i intend it to.



and slightly off topic, i notice chrome messes up the text when 'text-shadow' is used - bordering on illegible...

[Redhatter]

Black overlay? Where?

[GTAV6]

interesting... your screenshot is fine. [edit] sorry, i should have said; a translucent black overlay.
here's what i see:

(ff in the foreground, opera beneath)

This post has been edited by GTAV6: Jul 3 2011, 01:11 PM

[Redhatter]

Ahh, I see it now… not on any of my systems, but I notice in that screenshot of yours, the images in Firefox are noticably darker than in Opera. I'm not seeing this phenomena on Linux.

My MacBook is doing a backup to an external HDD, so I'd rather not disturb it just now, otherwise I'd check there too.

The screenshot I posted was Firefox 4 on Linux. I'm just looking on Firefox 5 (also under Linux) and not seeing the bug. I could reboot into Windows XP to check there, but there are things I must do in Linux, and I can't be arsed either.

[Brock]

Could this have something to do with it?

It's showing up slightly darker for me... ever so slightly.

The article is a few years old now but it could still be the case in the more recent versions of FF. There is a solution toward the bottom.

[GTAV6]

i think you're onto something there, Brock. it looks like that's pretty much my problem, in which case i'll either have to just accept it, or go back to using .gif's again (not going to happen, if i can help it). one thing's for certain, you can't get away with mixing image formats anymore...

[Redhatter]

So long as it looks consistent within the browser, and is functional, who cares? Most people aren't going to browse your site with two different browsers on the same computer simultaneously, and go "Ohh look, that one's darker!"

[Brock]

So long as it looks consistent within the browser, and is functional, who cares? Most people aren't going to browse your site with two different browsers on the same computer simultaneously, and go "Ohh look, that one's darker!"

True.

It seems their intention was to render PNG's 'richer', and I think that image in my link illustrates that - for full colour/vibrant images it would look nicer - while it looks like it's got a black screen over the top of it, if you're viewing it on a site alone it should have a lot more depth. With your site, though, it renders the white crosshatching a bit too dark, hard to make out what it is. Hey, some people might care. :P

That said, it should be up to the designer as to which colour profile to use, not have a browser decide that for them :/

[SledgY]

Brock is hinting at the problem, your issue is that your png has a colour profile, gamma or chromacity metadata (Photoshop does this by default), I use GIMP as when you save the image you can tell it not to save the additional metadata. The other option is to use pngstrip to remove the extra metadata.

The other common problem is when colours don't match up with CSS colours etc.

[Brock]

I believe you can save it out of photoshop without any colour management on it, not entirely sure thought but just had a look, have not tested.

Save for Web & Devices -> Preview: Internet Standard RGB (No Color Management) / Metadata: None.

Should save it out in similar fashion to GIMP yeah?

[GTAV6]

intriguing...
i use paint.net - but i've yet to even achieve 'amateur' status where graphics are concerned *sigh* :o(
however, i'm guessing paint.net very likely offer the same (or at least similar), options for .png's. i shall have to look into that. might have fiddle with pngstrip, too, see which way it swings things for me.


however! herein lies the crux of the whole matter:

So long as it looks consistent within the browser, and is functional, who cares? Most people aren't going to browse your site with two different browsers on the same computer simultaneously, and go "Ohh look, that one's darker!"

:o)

[SledgY]

So long as it looks consistent within the browser, and is functional, who cares? Most people aren't going to browse your site with two different browsers on the same computer simultaneously, and go "Ohh look, that one's darker!"

If all you are displaying is a picture this might be true but that is not the only use case if for example you have a border or banner that uses a PNG image and as well as a CSS defined border, you want the colours to match.

[harhis23]

It's just an image, the dark overlay may even appear as a design. As long as it does not mess up with your site's dimensions, don't change anything.

Have you tried updating your firefox?

Your site looks fine on my firefox.. Haven't encountered this problem before, anyway.

[Jeruselem]

Yes, for some reason PNG files display darker on Firefox than say IE. I spend a lot of effort fluffing around with PNG avatars for forums and it's always looks blurrier and dark with Firefox.