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

Question

我现在正在做一个网站。遗憾的是，png 徽标以及使用相同颜色的背景在某些使用 lila Firefox 的计算机上显示。 Chrome 蓝色看起来符合预期。

使用的监视器也有效果，但是 Chrome 一切正常。

这个问题是从哪里来的，我该如何解决？

Here is my image

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

上图来自firefox:

上图来自chrome:

Answer 1

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

最后，检查 PNG 的 ICC 色彩空间。

Answer 2

默认情况下，Firefox 处理包含 sRGB 配置文件的图像与未标记图像和 HTML 颜色略有不同。它具有三种操作模式，您可以通过转到 "about:config"、搜索 gfx.color_management.mode 来 select。默认值为“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

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

Why do browsers display grafics different and how to change that?

image

google-chrome

firefox

png

color-management