CODEWITHSUNDEEP
firefoxpng
Sedat Kapanoglu
Sedat Kapanoglu

Reputation: 47640

How can I make firefox render PNG with correct colors?

Firefox 12 renders the image below in paler colors while Chrome 19, Opera 11, Safari 5 and IE9 render it correctly.

The image on the left is original PNG uploaded to Stackoverflow while the one on the right is screenshot snippet of Firefox's rendering:

Original Firefox

When you view this question page on Firefox you still see a difference. I believe Firefox applies the same color transformation to it's own rendering (saved by snip tool) too. But I don't see any rendering difference on stackoverflow logo.

I tried with both Paint.NET's saved PNG and output of OptiPNG, results are the same. Any troubleshooting hints are also appreciated.

Upvotes: 2

Views: 1650

Answers (3)

NXT
NXT

Reputation: 2011

When using iMagick in PHP to create png image, the same situation might occur. At the current moment both Firefox and Chrome renders image with different color than IE11.

You can remove the gamma information using this PHP code just before saving:

$imagick->stripImage();

Upvotes: 0

Chris Snyder
Chris Snyder

Reputation: 106

Funny enough, in 2016 the exact opposite is now true. In the absence of an ICC profile, Firefox needs the sRGB chunk to render PNGs the same as Safari/Chrome/WebKit.

You can use free/open-source pngcrush to add an sRGB chunk to your image if it doesn't have one. 

pngcrush -sRGB existing.png new-better.png

NB - Firefox 45.0.2 for OS X, PNG generated by Adobe Illustrator CC 2015, your mileage may vary...

Upvotes: 2

Boris Zbarsky
Boris Zbarsky

Reputation: 35064

The png image has a gAMA chunk, so its rendering will depend on whether the thing doing the rendering supports gamma correction for PNGs.

Firefox does support this. Other browsers may not.

Upvotes: 2

Related Questions