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

Question

我正在处理的徽标在浏览器中的呈现方式不同。特定图片可在here和this Twitter page上找到。

下面是我的Mac OS X 10.11.5上的Chrome，Firefox和Safari上的图像截图，显卡是Intel HD Graphics 6000 1536 MB。请注意Chrome和Firefox如何错误地以更亮的红色显示徽标。

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

Answer 1

我认为这可能部分是由铬的长期问题造成的（https://bugs.chromium.org/p/chromium/issues/detail?id=44872）。只有一种可能性。

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

确保您使用的图片都使用相同的颜色配置文件，其余图片由浏览器决定。

Answer 2

您的问题似乎与相关的sRGB颜色配置文件有关。您似乎需要更正伽玛或选择其他颜色配置文件

引用的article与png和sRGB相关，但总体上解决了sRGB问题（并且在文章前面也提到了jpgs）。这就是所说的

  

使色彩空间匹配理论上，人们可以尝试使用   PNG的色彩管理功能，使色彩与CSS匹配   颜色。但是，在实践中，这不起作用，甚至可以制作   更糟糕的是，因为规范中有关颜色的说法   通常不会实施。 sRGB当您触摸颜色问题时   在正式规范中的值，你应该以某种方式定义   价值观的意义。描述意义的简单方法   颜色值是这样的：“颜色值传递给   Windows图形API。作者应该选择这样的颜色值   在普通PC上实现预期外观的方式   当然，这个定义在规范中看起来不太好   应该是精确和平台中立的。看起来会好得多   如果有正式色彩空间的规范性参考   定义。一些处理颜色问题的人意识到了这一点   试图迫使Windows PC进行色彩管理是不现实的。   sRGB是一个色彩空间，可以模拟普通的普通办公室PC   平庸的CRT。当Windows PC或Linux机箱被称为“sRGB”时   系统“，重要的是要意识到这些设备/软件   未明确设计组合以符合a   规范称为sRGB。相反，规范旨在   符合系统！但是，并非所有PC都是相同的，所以事实并非如此   像所有PC都有一个完全相同的颜色空间。 sRGB只是一个   平均情况的近似值。 此外，当它说Mac是   不是sRGB系统，重要的是要意识到Mac可以   配置为一个。它可能是一个喜欢Mac的老板   Apple平板显示器不一定需要他/她的显示器   仿效一个平庸的办公室CRT。 CSS和PNG规范中的sRGB   根据CSS2规范，CSS颜色值是指   sRGB色彩空间。但实际上，除了Mac IE 5之外的所有浏览器   启用ColorSync（默认情况下禁用）似乎只是对待   CSS颜色值作为系统颜色的任何颜色空间中的值   空间恰好是。不过，期待这个是合理的   sRGB标记的PNG图像的颜色要与之一致地处理   CSS颜色。同样，它在实践中不会那样工作。巴布亚新几内亚   1.0规范，这是一个W3C推荐标准，没有明确的方式来指示图像的颜色空间是sRGB   究竟。理论上，如果伽玛值为，则结果应该接近   图像设置为1 / 2.2。但是，在实践中图像的颜色   标记为这种方式与例如CSS颜色不匹配。 Windows IE。巴布亚新几内亚   1.1规范，不是W3C推荐标准，增加了一种明确的方式来指示图像的色彩空间   sRGB- sRGB块。然而，存在问题。在Mac IE 5中   当ColorSync时，sRGB标记的PNG的颜色与CSS颜色不匹配   默认情况下禁用支持。 Safari会应用gamma更改   sRGB标记的PNG ，但不是CSS颜色使颜色不   比赛。 CSS2规范没有指定哪个ICC渲染   将sRGB颜色映射到系统颜色时应使用intent   空间。另一方面，PNG 1.2允许渲染意图   要定义的颜色空间转换。如果浏览器的颜色空间   使用ICC配置文件进行转换以及它用于的转换意图   CSS颜色与PNG中定义的渲染意图不同   文件，即使原始颜色，结果颜色可能会有所不同   是相同的，在相同的颜色空间。

Answer 3

徽标在着色和路径上非常简单，您是否尝试过可缩放矢量图形（.svg）格式？我会尝试找到具有相似颜色的SVG文件，并尝试跨浏览器。

Answer 4

我建议不要使用jpg来使用png，因为它是专为在网络上传输图像而设计的。我从未遇到过您遇到的具体问题，但怀疑png会解决问题。