为什么此 PNG 图像在 Chrome 和 Firefox 中与在 Safari 和 IE 中的显示不同？

Question

看看这张图片：

在 Chrome 和 Firefox 上，它将显示为梨形。现在，尝试保存它并查看它保存在您的桌面上。此外，尝试在Safari或Internet Explorer 中查看。它将显示为一个苹果！

尝试单击图像并四处移动。你会注意到苹果出现了。

为什么会发生这种情况？

Answer 1

这是因为某些浏览器执行图像文件中指定的伽马校正。

这是未校正的图像。苹果图片中的“白色”像素包含梨图片，以更高的强度存储，即非常明亮。

这是伽马校正图像。梨图片中的“黑色”像素包含苹果图片，以相当正常的强度存储，但通过伽马校正缩小到接近黑色。

在我的屏幕上，我可以在第一张图像的白色像素中隐约看到梨，但在第二张图像中，苹果与周围的黑色像素无法区分。

（您可能还会在伽马校正梨上看到一些色带，因为未校正的图像使用的颜色通道范围要小得多。）

PNG 图像文件包含一个 gAMA 块，指定文件伽马值为 0.02。在没有伽马校正的情况下显示时，观看者会看到一个苹果，其中散布着“白色”像素，实际上是梨的原始（高）强度。

当使用伽马校正显示时，观看者会看到带有“黑色”像素的颜色校正梨，这些像素实际上是以低得多的伽马值渲染的苹果。

显示梨的浏览器对图像执行伽马校正，而显示苹果的浏览器不执行伽马校正，而只是显示其文字颜色值。

Answer 2

这对于评论来说有点太多了，但希望它有所帮助。

所以，我相当肯定这个问题涉及浏览器用 PNG 解释伽马信息的方式。这是一个非常有趣的问题，首先要处理伽马信息的模糊性。

文章PNG伽玛“校正”的哀伤的故事提供了问题，补救措施，以及其他有趣的事实的一个非常好的总结。

话虽如此，我们实际上可以使用以下方法从图像中剥离伽马信息 pngcrush

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

所以有伽马信息和没有它：

我不会真的说这是“答案”，但如果有的话，它可能是在正确的方向上。我相信对颜色配置文件等有很多知识的人会做出更正式的回应。

Answer 3

改变图像的伽马 ( ? ) 包括修改伽马值：

(R',G',B') = (R ^? , G ^? , B ^? )

它给出了在将伽马函数应用于初始像素值 (R,G,B) 后显示在屏幕上的输出像素颜色 (R',G',B')（考虑 R、G 和 B 在 0 和 1 之间归一化）。

现在，让我们以红色通道为例。
如果R = R0+R1，您将获得
R' = (R0+R1) ^？= R0 ^? * (1+R1/R0) ^?

如果 R0 比 R1 大得多，那么您有
(1+R1/R0) ^？? 1 + ? R1/R0，
所以R' ？R0 ^? + ? R1*R0 ^?-1

这意味着对于接近 0 的伽马，R0 ^? 占主导地位。对于 ?=1，你得到
R' ? R0 + R1

对于较大的伽马，第二项占主导地位，因此您可以直接设置 R0 = 梨的红色分量和 R1 = 苹果的红色分量，其中 R0 远大于 R1，您将在更改伽玛时获得所需的变化您的显示器（或每个软件使用的特定伽马曲线）。

Answer 4

这不是四舍五入像素，ICC 颜色配置文件不是问题。

这是一个技巧图像，一些浏览器显示没有伽马数据的 PNG。对于那些浏览器，您会看到一件事，而对于其他浏览器，您会看到完整的图像（梨子隐藏在背景中）。

我看到的是一个苹果/梨的把戏图像，或者我只是看到了梨，这取决于浏览器是否支持这个伽马数据。