JPEG图像在不同浏览器中呈现颜色不一致

Question

JPEG图像在不同浏览器中呈现颜色不一致

5

我正在处理的标志在不同浏览器中呈现不同。具体图片可以在这里和这个Twitter页面找到。

下面是在我的Mac OS X 10.11.5上使用Chrome，Firefox和Safari浏览器以及Intel HD Graphics 6000 1536 MB显卡显示的截图。请注意，Chrome和Firefox使用更亮的红色错误地显示了标志。

我该如何确保我的JPEG在各种浏览器中一致地显示？

- Randomblue

这个 JPEG 文件里面有任何颜色配置文件信息吗？ - Rowland Shaw

你是如何保存它的？使用了哪个软件？通常在Adobe Photoshop中，可以通过将图像保存为Web格式来避免这种情况。 - Mohit Bhardwaj

颜色配置文件为sRGB。 - Randomblue

请注意，您的图像在 Windows 上的 Chrome 浏览器（最新版本）上显示完美。 - Rachel Gallen

颜色是什么？你能展示它的RGB或CMYK值吗？ - Liam

@Liam：这是#c84448。 - Randomblue

4个回答

1

你的问题似乎与相关的sRGB颜色配置文件有关。看起来你需要纠正伽马值或选择另一个颜色配置文件。

我引用的文章与png和sRGB有关，但总体上解决了sRGB问题（文章前面也提到了jpg）。以下是它的内容。

在理论上，可以尝试使用PNG的颜色管理功能使颜色与CSS颜色匹配。然而，在实践中，这并不起作用，甚至可能会使情况更糟，因为规范中关于颜色的内容通常没有被实现。sRGB当您在正式规范中涉及颜色值时，应该以某种方式定义值的含义。描述颜色值含义的简单方法是：“将颜色值传递给Windows图形API。作者应该选择颜色值，使得在平均PC上达到预期的外观。”当然，在一个旨在精确和平台中立的规范中，这个定义看起来不太好。如果有一个正式的颜色空间定义的规范参考就会好得多。一些处理颜色问题的人意识到，试图强制Windows PC进行颜色管理是不现实的。sRGB是模拟具有通常普通CRT的平均办公室PC的颜色空间。当说Windows PC或Linux桌面是“sRGB系统”时，重要的是要意识到这些设备/软件组合并没有明确地设计为符合称为sRGB的规范。相反，规范是设计为符合系统的！然而，并不是所有的PC都是相同的，所以并不像所有的PC有一个确切的共同颜色空间。sRGB只是一个平均情况的近似值。此外，当说Mac不是一个sRGB系统时，重要的是要意识到Mac可以配置为成为一个。可能是一个拥有花哨的苹果平板显示屏的Mac所有者并不一定希望他/她的显示器模拟一个普通的办公室CRT。根据CSS2规范，CSS颜色值指的是sRGB颜色空间。然而，在实践中，除了启用ColorSync的Mac IE 5之外，所有浏览器似乎都将CSS颜色值视为系统颜色空间中的值。尽管如此，合理地期望标记为sRGB的PNG图像的颜色与CSS颜色一致。然而，在实践中并不起作用。PNG 1.0规范是W3C推荐的，没有明确的方法来指示图像的颜色空间是sRGB。在理论上，如果将图像的伽马值设置为1/2.2，则结果应该接近。然而，在实践中，标记为这种方式的图像的颜色与例如Windows IE中的CSS颜色不匹配。PNG 1.1规范不是W3C推荐的，添加了一种明确的方法来指示图像的颜色空间是sRGB——sRGB块。然而，存在问题。在默认情况下禁用ColorSync支持的Mac IE 5中，标记为sRGB的PNG的颜色与CSS颜色不匹配。Safari对标记为sRGB的PNG应用伽马更改，但不适用于CSS颜色，使得颜色不匹配。CSS2规范没有指定将sRGB颜色映射到系统颜色空间时应使用哪个ICC渲染意图。另一方面，PNG 1.2允许定义颜色空间转换的渲染意图。如果浏览器使用ICC配置文件和渲染意图进行颜色空间转换，并且它用于CSS颜色的渲染意图与PNG文件中定义的渲染意图不同，则即使原始颜色相同且在同一颜色空间中，结果的颜

- Rachel Gallen

1

“标志的颜色和路径非常简单，您尝试过可缩放矢量图形（.svg）格式吗？我会尝试查找具有类似着色的SVG文件，并尝试在不同浏览器中使用它们。”

- aleksk

同时，我认为SVG将是更好的解决方案，而且它可能会导致更小的占用空间。 - Peter

-1

我建议您使用 png 替代 jpg，因为它是专门为在网络上传输图像而设计的。我从未遇到过您所提到的具体问题，但我认为使用 png 可以解决这个问题。

- BeatingToADifferentRobot

我因为同一个PNG的问题而找到了这个页面。 - Rohit Chatterjee

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nick · Accepted Answer

我认为这可能部分是由于 Chromium 存在的一个长期问题引起的(https://bugs.chromium.org/p/chromium/issues/detail?id=44872)。这只是一种可能性。

我的建议是确保所有图像具有相同的颜色配置文件。Safari支持v2和v4 ICC配置文件。Firefox支持ICC v4颜色配置文件，但我认为该选项默认关闭(可以在 about:config 中打开)。Chrome根本不支持颜色配置文件。因此，这些浏览器中的每一个都会以不同的方式显示颜色，这并不是你的错，它们看起来明显不同。

只需确保您使用的所有图像都使用相同的颜色配置文件，其余工作由浏览器完成。