为什么浏览器显示图形不同以及如何更改？

Question

我正在网站上工作。遗憾的是， png 徽标以及使用相同颜色的背景显示在lila中使用Firefox的某些计算机上。使用Chrome，蓝色看起来像预期的那样。

使用过的显示器也有效果，但Chrome的一切看起来都很好。

该问题来自哪里，我该如何解决？

Here is my image

在这里，您可以看到我的显示器的照片。带有firefox（左侧）的lila略显可见。最大的问题是我的网站背景中使用了颜色，看起来比使用firefox，并且显示的颜色与我网站上的css中的其他颜色不再匹配。

以上图片来自firefox：

以上图片来自chrome：

Answer 1

默认情况下，Firefox处理包含sRGB配置文件的图像与未标记图像和HTML颜色略有不同。它有三种操作模式，您可以通过转到“about：config”，搜索gfx.color_management.mode来选择。默认值为“2”。将其更改为“0”（无颜色管理）或“1”（颜色管理所有内容），您将得到一个很好的匹配。

查看位于https://bugzilla.mozilla.org的四年前的错误＃621474，然后向下滚动评论＃49以查看补丁的当前状态。

由于存在这些差异（您无法控制人们使用的设置），最好从图像中删除iCCP块或sRGB块。浏览器会假设图像位于sRGB色彩空间中，并根据HTML颜色正确显示。

“pngcheck”说你有iCCP和cHRM块：

$ pngcheck -v so-logo.png
File: so-logo.png (147985 bytes)
  chunk IHDR at offset 0x0000c, length 13
    506 x 171 image, 32-bit RGB+alpha, non-interlaced
  chunk pHYs at offset 0x00025, length 9: 2835x2835 pixels/meter (72 dpi)
  chunk iCCP at offset 0x0003a, length 2639
    profile name = Photoshop ICC profile, compression method = 0 (deflate)
    compressed profile = 2616 bytes
  chunk cHRM at offset 0x00a95, length 32
    White x = 0.31269 y = 0.32899,  Red x = 0.63999 y = 0.33001
    Green x = 0.3 y = 0.6,  Blue x = 0.15 y = 0.05999
  chunk IDAT at offset 0x00ac1, length 145212
    zlib: deflated, 32K window, maximum compression
  chunk IEND at offset 0x24209, length 0
No errors detected in so-logo.png (6 chunks, 57.2% compression).

您可以使用各种工具删除这些块：

pngcrush (also removes the pHYs chunk):
pngcrush -rem alla -force logo.png logo_crushed.png

pngsplit+cat:
pngsplit logo.png
rm logo.png.0003.iCCP
rm logo.png.0004.cHRM
cat logo.png.00*.* > logo_split_cat.png

Answer 2

PNG文件包括ICC颜色配置文件元数据。某些浏览器忽略此元数据并显示图像，就好像其位代表sRGB图像一样。其他浏览器会在输出到显示器之前考虑ICC色彩空间并进行适当的颜色转换。如果PNG使用sRGB颜色配置文件，它在所有浏览器中应该看起来相同。但是，如果您的PNG具有其他颜色配置文件（例如AdobeRGB），那么Firefox可能没有补偿，而Chrome也是如此。在这种情况下，Firefox图像在技术上显示不正确，虽然它将匹配HTML中的RGB字体颜色，而Chrome图像显示正确＆＃34; （即创作者对颜色的原始意图）但与HTML中的RGB字体颜色（在sRGB中指定）不匹配。

底线，检查PNG的ICC色彩空间。