Home » Why does this PNG image display differently in Chrome & Firefox than in Safari and IE?

Why does this PNG image display differently in Chrome & Firefox than in Safari and IE?

Solutons:


It happens because some browsers perform the gamma correction as specified in the image file.

Here’s the uncorrected image. The “white-ish” pixels in the apple picture contain the picture of a pear, stored at a much higher intensity, i.e. very bright.

Here’s the gamma-corrected image. The “black-ish” pixels in the pear picture contain the picture of an apple, stored at a fairly normal intensity, but scaled down to near black with the gamma correction.

On my screen, I can see the pear faintly among the white pixels in the first image, but in the second image, the apple is indistinguishable from the black pixels around it.

(You may also see some colour banding on the gamma-corrected pear, because the uncorrected image is using a much smaller range of the colour channels.)

The PNG image file contains a gAMA chunk specifying a file gamma value of 0.02. When displayed without gamma correction, the viewer sees an apple with “white” pixels interspersed, which are actually the pear at its original (high) intensity.

When displayed with gamma correction, the viewer sees a colour-corrected pear with “black” pixels which are actually the apple rendered at a much lower gamma value.

Browsers which display the pear are performing gamma correction on the image, while browsers which display the apple are not performing gamma correction, but just showing it with its literal colour values.

This was a little too much for a comment, but hopefully it helps.

So, I am fairly certain that this issue deals with the way the browsers interpret gamma information with PNGs. It’s a pretty fun problem and deals with the ambiguities of gamma information in the first place.

The article The Sad Story of PNG Gamma “Correction” provides a very nice summary of the issues, remedies, and other fun facts.

With that said, we can actually strip the gamma information from an image using pngcrush

pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB pear.png apple.png

So with the gamma information and without it:

pear
an apple

I wouldn’t really say this is “the answer”, but if anything it is probably in the right direction. I am sure someone with a lot of knowledge concerning color-profiles and so on will come along with a more formal response.

Changing the gamma (γ) of an image consists in modifying the value gamma in:

(R’,G’,B’) = (Rγ, Gγ, Bγ)

which gives the output pixel color (R’,G’,B’) displayed on the screen after applying the gamma function to the initial pixel values (R,G,B) (considering R,G, and B normalized between 0 and 1).

Now, let’s take the red channel for example.
If R = R0+R1 , you will obtain
R’ = (R0+R1)γ = R0γ * (1+R1/R0)γ

If R0 is much bigger than R1, then you have
(1+R1/R0)γ ≈ 1 + γR1/R0,
so R’ ≈ R0γ + γR1*R0γ-1

This means that for gamma close to 0, R0γ dominates. For γ=1, you get
R’ ≈ R0 + R1

Fo a large gamma, the second term dominates, so that you can directly setup R0 = red component of the pear and R1 = red component of the apple, with R0 much larger than R1 and you will obtain the desired variations when changing the gamma of your monitor (or the particular gamma curve each software uses).

Related Solutions

Recursive to iterative using a systematic method [closed]

So, to restate the question. We have a function f, in our case fac. def fac(n): if n==0: return 1 else: return n*fac(n-1) It is implemented recursively. We want to implement a function facOpt that does the same thing but iteratively. fac is written almost in...

How can I match values in one file to ranges from another?

if the data file sizes are not huge, there is a simpler way $ join input1 input2 | awk '$5<$4 && $3<$5 {print $2, $5-$3+1}' B100002 32 B100043 15 B123465 3 This Perl code seems to solve your problem It is a common idiom: to load the entire...

Javascript difference between “=” and “===” [duplicate]

You need to use == or === for equality checking. = is the assignment operator. You can read about assignment operators here on MDN. As a quick reference as you are learning JS: = assignment operator == equal to === equal value and equal type != not equal !==...

Compiler complains about misplaced else [closed]

Your compiler complains about an misplaced else because, well, there is an else without a preceding if: // ... for (j=1; j<n-i; j++) { if(a[j]<=a[j+1]) { // ... } // END OF IF } // END OF FOR else { continue; } // ... The else in your code does not follow...

Bootstrap – custom alerts with progress bar

/* !important are just used to overide the bootstrap css in the snippet */ .alertContainer { border-radius: 0 !important; border-width: 0 !important; padding: 0 !important; height: auto !important; position: absolute !important; bottom: 15px !important; left:...

How to Garbage Collect an external Javascript load?

Yes, s.onload = null is useful and will garbage collect! As of 2019, it is not possible to explicitly or programmatically trigger garbage collection in JavaScript. That means it collects when it wants. Although there is cases where setting to null may do a GC...

Math programming with python

At first, what you are looking for is the modulo operator and the function math.floor() Modulo from wikipedia: In computing, the modulo operation finds the remainder after division of one number by another (sometimes called modulus). for example: 12%12=0...

Android slide over letters to create a word [closed]

Here some advice you can use: First for each cell you can create an object that represents the state of that cell: class Cell { char mChar; int row,column; boolean isSelected; } then you can create a 2D array of your cells Cell[][] mTable = ... For views you...

Sum two integers in Java

You reused the x and y variable names (hence the variable x is already defined in method main error), and forgot to assign the ints read from the Scanner to the x and y variables. Besides, there's no need to create two Scanner objects. public static void...

Extend three classes that implements an interface in Java

Using this simplified implementation of the library, using method() instead of M(): interface IFC { void method(); } class A implements IFC { public void method() { System.out.println("method in A"); }; } As akuzminykh mentions in their comment You'd write a...

How to set the stream content in PHPExcel? [closed]

Okey, First thing first PHPExcel_Worksheet_MemoryDrawing() can't solve your problem if you insist to use stream content and pass that to your worksheet your PDF will not render your image. But you can use `PHPExcel_Worksheet_Drawing()' if you want to render...

How to remove all files from a directory?

Linux does not use extensions. It is up to the creator of the file to decide whether the name should have an extension. Linux looks at the first few bytes to figure out what kind of file it is dealing with. To remove all non-hidden files* in a directory use: rm...

Hacker used picture upload to get PHP code into my site

Client side validation The validation code you have provided is in JavaScript. That suggests it is code that you use to do the validation on the client. Rule number one of securing webapps is to never trust the client. The client is under the full control of...

First Time HTML5/CSS Site

Semantically, I would suggest using HTML5 elements more. For example, instead of... <div id="header"> <div id="logo"></div> </div> Use instead: (the ID can stay if you want it to) <header> <div id="logo"></div>...

How classes work in a CSS file? [closed]

In your first example: .container.inner_content.text_section Match any element that has all three classes .container.inner_content.text_section { color: red; } <div class="container inner_content">one class</div> <div class="container...