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

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

看看这张图片:

苹果或梨

在 Chrome 和 Firefox 上,它将显示为梨形。现在,尝试保存它并查看保存在桌面上的内容。此外,尝试在苹果浏览器或者IE浏览器。它将显示为一个苹果!

尝试单击图像并移动它。您将注意到苹果出现了。

为什么会发生这种情况?

答案1

发生这种情况的原因是某些浏览器按照图像文件中指定的要求执行伽马校正。

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

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

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

(您可能还会在伽马校正后的梨上看到一些色带,因为未校正的图像使用了更小范围的颜色通道。)

PNG 图像文件包含一个 gAMA 块,指定文件伽马值为 0.02。当显示时没有伽马校正,观看者会看到一个苹果,中间散布着“白色”像素,而这实际上是梨的原始(高)强度。

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

显示梨的浏览器正在对图像执行伽马校正,而显示苹果的浏览器没有执行伽马校正,而只是以其文字颜色值显示它。

答案2

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

因此,我相当肯定,这个问题与浏览器解释 PNG 的伽马信息的方式有关。这是一个非常有趣的问题,首先要处理伽马信息的模糊性。

文章巴布亚新几内亚伽马“校正”的悲伤故事对问题、补救措施和其他有趣事实进行了非常好的总结。

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

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

因此,有伽马信息和没有伽马信息的情况下:

梨 苹果

我不会说这就是“答案”,但如果有的话,它可能是正确的方向。我相信对颜色配置文件等知识渊博的人会给出更正式的答复。

答案3

改变伽马(γ)包括修改图像的伽马值:

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

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

现在,我们以红色通道为例。
如果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,并且当更改显示器的伽马(或每个软件使用的特定伽马曲线)时,您将获得所需的变化。

答案4

事实上,你可以在经过适当校准的显示器上看到图片中的更多细节,如果伽玛/亮度/对比度太高,你可以看到图片中的一个图像是更多的

相关内容