Why does this png display differently in Chrome/Firefox than in Safari/IE? | Hacker News Reader

Why does this png display differently in Chrome/Firefox than in Safari/IE?

stackoverflow.com

279 pointsmiorel38 comments

The the image consists of a checkerboard-style pattern of pixels. The "dark" pixels form the apple image, while the "light" ones show the pear. The answer to the SO question suggests that the gamma correction information (which is used by Chrome and FF, but not by older IE) makes the image darker, blacking out the apple and revealing the pear. Without gamma correction, the apple is visible, and the pear becomes a light-colored ghost.

edit: I put together the pieces! yay! :D

Hmm... I'm quite familiar with gamma correction. For those who are not, I recently did an "Explain Like I'm Five" http://www.reddit.com/r/explainlikeimfive/comments/1aeuyb/el...

But, my understanding is that for an image displayed 1-1 pixel-to-screen there is no intermediate math going on. So, there shouldn't be any opportunity for non-gamma-correct calculations to screw up the output.

Here's a nice example of non-gamma-correct browsers producing incorrect results after scaling an image: http://filmicgames.com/archives/354 also http://www.4p8.com/eric.brasseur/gamma.html But, in the SO question there is no scaling. So, I'm still confused about the difference in visual results between different applications directly displaying the image...

Even when there's no scaling involved, gamma information embedded in an image can certainly be meaningful. Among other things, they can be used to correct for the fact that different OS's or devices can assume different default gamma factors. Without gamma correction, an image edited on a Mac might look different when viewed on a PC. If the image can tell the browser what gamma factor it was designed for, that problem can be avoided.

That's exactly what I was forgetting. Different systems assume different display gammas such as 1.8, 2.2 or sRGB (a mix of 1.0 and 2.4). Thanks!

On my machine I can see both of them, but neither is particularly distinct, as though two 40% transparency images were stacked.

So obviously my various image viewers aren't reading the gamma correction to show the pear, however I'm more curious why I don't see the apple correctly if the image has been intended to show the apple without gamma/color correction?

My monitor is color calibrated, so shouldn't I just see the apple and not the pear?

Using Photoshop I tried to make my own image like this.

http://i.imgur.com/36EgeOF.png

It's a mix of Tux and the GNU logo. The strange thing is that Firefox shows Tux, and Chrome shows the GNU logo. Very strange considering both Firefox and Chrome show the pear. My understanding is that the GNU logo (the 'lighter' image) should be shown if the gamma correction is applied. Does anyone know what's going on here?

EDIT: By removing the iCCP color profile chunk, the image displays properly in Firefox.

For anyone interested in making one:

First, I put the two images on separate layers in photoshop. I changed the output levels on Tux to be from 0 to 210, darkening it slightly. I changed the output levels on the GNU logo to be from 215 to 255, making it very bright. Then I used a layer mask on the top layer with a grid pattern to mix the two images. The saved image was a mix of the relatively normal Tux pixels and the bright GNU pixels.

The final touch was editing the gAMA value in the PNG. Using the free program, TweakPNG, I set it to something very low, like in the pear image: 0.02. And that was it!

Using Firefox, I see a very grainy Tux, and a faded GNU logo in the background. When I take a screenshot of it using Firefox, and view the screenshot in Chrome, I see the grainy Tux/faded GNU logo, identical to my viewing of it in Firefox. Is this how it's supposed to work?

http://i.imgur.com/hTauClg.jpg (screenshot of what I see in firefox)

I apologize if this is a dumb question.

Firefox SHOULD be showing the GNU logo. For some reason, when a color profile is included in the image, Firefox ignores the gamma correction information. Or at least, that's what seems to be happening. Viewing the original image in Chrome should correctly show the GNU logo.

The reason the screenshot doesn't appear different in Chrome is because no gamma correction is attached to it.

Anyway, check this new link: http://i.imgur.com/vYBIZ0R.png

This is the same image with the color profile removed. It should show the GNU logo in both Firefox in Chrome, but show Tux in browsers which ignore the gamma correction.

I apologize if my explanations are confusing... I'm very new to this stuff.

Even stranger on Windows 8 the thumbnail shows up as an apple but when opened the Windows Photo Viewer shows it as a pear.

http://i.minus.com/ilnhPD7qumz9e.PNG

Good find.

Off topic: how are you finding windows 8?

On my tablet I love it, I have a ThinkPad Tablet 2 and from my extensive tablet usage(starting with an HP TC1100 running XP, iPad and various Android tablets) I think it is by far the best tablet OS to get work done on, from their being no hassle to connect to printers, full USB peripheral support, compatibility with old x86 apps, quick gestures, and the metro/desktop multitasking is great. Plus I think IE10 is the best tablet web browser I've ever used, I wouldn't touch IE on the desktop, Firefox with all my extensions is my only home.

On my desktop I initially would use the metro stuff here and there but after few a few months the novelty has worn off and I very rarely venture into the metro stuff. When used that way Windows 8 is just Windows 7+. I think one of the greatest things about Windows 8, is the promise of Windows Blue, Microsoft's commitment to pushing out major upgrades.

In summary, on a tablet Windows 8 is excellent, on a desktop it's at times between ok to pretty good.

Edit: here is a screenshot from my tablet of some of the printers that I've connected to in my travels http://i.minus.com/it1xr6gbOnAFx.png

Cool. Thanks for your detailed reply - much appreciated. Going to stick it on my T61 this evening.

As someone who has been using windows 8 for a few months now, if you are a person who rarely used the start menu to open programs before, windows 8 can easily be used as an improved version of windows 7. Dual monitors also help a lot to make sure you never feel like you are trapped in metro. (Metro only ever shows on one screen)

My explanation is as follows: the original image uses a checkerboard pattern. When you make a thumbnail it removes some rows and columns to make the image smaller. When you remove all even rows and columns of a checkerboard the fields that are left are of the same color. Similarly when you remove odd rows and columns.

In this case black and white fields of a checkerboard correspond to pear and apple pixels, so you are left with one of the images.

The thing that puzzles me is that the image opens in GIMP showing the apple (incorrectly, apparently). I would have thought that GIMP would be entirely aware of embedded color/gamma information like this. (It certainly makes enough of a fuss about color profiles practically every time I open an image!) Is the gamma somehow encoded in a less-standard way, or is GIMP just less clever than I thought?

(My copy of GIMP is a bit outdated, but that shouldn't be a big deal for a basic feature like this, right?)

I will use this trick on all of my online published images - the IE version will say:

"GET A REAL BROWSER"

That seems like an abrasive and silly idea to me. Safari and modern IE are good browsers.

Decent

IE10 shows a pear. It became standards complaint or what?

This reminded me of an old trick that worked in IE6 or so, where they would use alternating pixels to take advantage of how selection highlighting worked in IE6 to make another image appear when you select it.

What was interesting to me was that in Chrome, if you scroll the page you can see a faint version of the apple until you stop scrolling, at which point all you see if the pear.

I think this has some interesting applications in spearphishing etc:
You know the Bob Boss uses IE so you send a link to a "specially crafted" web page that uses an image like this to show the boss a completely smart solution (place high value object in this location inside vault) and ask him if it is OK. Now just get Bob to forward the link to the web page to Alise who uses some other, known web browser and she sees a map with a location outside the vault.
Just a thought: for now if you own the server anyway you can just do browser sniffing and send two completely different images..

It would be interesting to try the same attack via email attachments, i.e. get Bob to check an image with a contract, then forward it to Alice saying 'this is approved' but the wording of her contract is different to the one he read.

I don't understand the map part.

When I drag the window, it flickers both.

On my Retina monitor (Firefox Nightly), I see a pear but also the apple, though very faintly. Saving to the desktop gets me an apple, as expected.

using ff on a nexus 7 I see the apple and a very faint pear.

Interesting that Chrome (on OS X) displays a pear. I was under the impression Chrome used Core Graphics which would have exhibited this behaviour too?
Maybe not.

Chrome uses Skia instead of CoreGraphics according to this: http://paulirish.com/2013/webkit-for-developers#webkit-commo...

Chrome for Mac used to use CoreGraphics, but it switched to Skia because Skia was a lot faster at drawing stuff. (It still uses CoreText for rasterizing fonts, and Cocoa for drawing buttons.)

Safari on an iPad mini, first edition, shows an apple (obviously) and very faintly a pear.

I wrote a command line tool to create these images a while ago: https://github.com/trishume/doubleVision

Reminds me of this question on JPEG images: http://stackoverflow.com/questions/3937885/cross-browser-inc...

I'm using firefox and it glitches when I scroll. So I can see the apple when I scroll. I doesn't seem like it should be the case.

Probably an unintentional optimization/side effect of using the GPU for some drawing path.
Regression tests are fun!

Chrome on Android shows an apple

Reminds me of KOOLEFANT, by Magnus Bodin:
http://x42.com/koolefant/
This goes back to the late 1990s; the page mentions MSIE for Solaris.

I miss when webpages used to look like that!

Reply on news.ycombinator.com