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

Posted 2023-03-06

【中文标题】JPEG 颜色在不同浏览器中呈现不一致

【英文标题】：JPEG color renders inconsistently across browsers

【发布时间】：2016-10-11 11:39:05

【问题描述】：

我正在使用的徽标在不同浏览器中呈现不同。具体图片在here和this Twitter page上可用。

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

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

【问题讨论】：

jpeg文件里面有颜色配置信息吗？

您是如何保存它的以及在哪个软件中保存的？通常在 Adob​​e Photoshop 中可以通过将图像保存为网络来避免这种情况。

颜色配置文件是 sRGB。

fyi，您的图像在 windows 上的 chrome 上完美显示（最新的 vsn）

什么颜色？你能显示它的 RGB 或 CMYK 值吗？

【参考方案1】：

我相信这可能部分是由铬长期存在的问题引起的 (https://bugs.chromium.org/p/chromium/issues/detail?id=44872)。只有一种可能。

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

只需确保您使用的所有图像都使用相同的颜色配置文件，其余的取决于浏览器。

【参考方案2】：

您的问题似乎与关联的 sRGB 颜色配置文件有关。看来您需要校正 gamma 或选择其他颜色配置文件

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

使色彩空间匹配理论上，可以尝试使用 PNG的颜色管理功能使颜色与CSS匹配 颜色。然而，在实践中这不起作用，甚至可以使 更糟糕的是，因为规格中关于颜色的内容 一般不实施。 sRGB当你触摸颜色的问题 正式规范中的值，您应该以某种方式定义 值的含义。描述含义的简单方法 颜色值将是这样的：“颜色值被传递给 Windows 图形 API。作者应该选择这样的颜色值 在普通 PC 上实现预期外观的方式。”的 当然，这个定义在规范中看起来不太好 应该是精确的和平台中立的。看起来会好很多 如果有对正式色彩空间的规范性参考 定义。一些处理颜色问题的人意识到它 试图强制 Windows PC 进行色彩管理是不现实的。 sRGB 是一种色彩空间，它模拟了具有通常 中规中矩的阴极射线管。当 Windows PC 或 Linux 机器被称为“sRGB 系统”，重要的是要认识到这些设备/软件 组合没有明确设计为符合 称为 sRGB 的规范。相反，该规范旨在 符合制度！然而，并不是所有的 PC 都是一样的，所以它不是 就像所有 PC 都有一个精确的公共色彩空间一样。 sRGB 只是一个 平均情况的近似值。 另外，当它说 Mac 是 不是 sRGB 系统，重要的是要意识到 Mac 可以 配置为一个。可能只是一个喜欢看中的Mac所有者 苹果平板屏幕不一定要他/她的显示器 模仿平庸的办公室 CRT。 CSS 和 PNG 规范中的 sRGB 根据 CSS2 规范，CSS 颜色值指的是 sRGB 颜色空间。然而，实际上，除了 Mac IE 5 之外的所有浏览器 启用 ColorSync（默认禁用）似乎只是对待 CSS 颜色值作为系统颜色的任何颜色空间中的值 空间恰好是。不过，有理由期待 sRGB 标记的 PNG 图像的颜色要与 CSS 颜色。再一次，它在实践中只是不那样工作。巴布亚新几内亚 1.0 规范是 W3C 推荐标准，没有明确的方式表明图像的色彩空间是 sRGB 确切地。理论上，如果 gamma 值 图像设置为 1/2.2。然而，在实践中，图像的颜色 以这种方式标记的方式与例如中的 CSS 颜色不匹配。视窗IE。巴布亚新几内亚 1.1 规范（不是 W3C 建议）添加了一种明确的方式来指示图像的色彩空间是 sRGB — sRGB 块。然而，也有问题。在 Mac IE 5 中 当 ColorSync 时，sRGB 标记的 PNG 的颜色与 CSS 颜色不匹配 默认情况下禁用支持。 Safari 应用了伽马变化 到 sRGB 标记的 PNGs 但不是 CSS 颜色，使颜色不 匹配。 CSS2 规范没有指定哪个 ICC 渲染 将 sRGB 颜色映射到系统颜色时应使用意图 空间。另一方面，PNG 1.2 允许为 要定义的色彩空间转换。如果浏览器有色彩空间 使用 ICC 配置文件及其用于 CSS 颜色与 PNG 中定义的渲染意图不同 文件，即使原始颜色也可能不同 是相同的并且在相同的色彩空间中。

【参考方案3】：

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

【讨论】：

也认为 SVG 将是一个更好的解决方案，它可能会导致占用空间更小。

【参考方案4】：

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

【讨论】：

我发现这个页面是因为与 PNG 有同样的问题