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

Question

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

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

这个问题从何而来？我该如何解决？

Here is my image

您可以在此处看到我的显示器的照片。带有火狐浏览器的莱拉(左侧)稍微可见。最大的问题是，该颜色用在我网站的背景中，在 Firefox 中看起来比在 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 block 或 sRGB block 。浏览器将假定图像位于 sRGB 色彩空间中，并根据 HTML 颜色正确显示它。

“pngcheck”表示您有 iCCP 和 cHRM block :

$ 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).

您可以使用多种工具来删除这些 block :

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