作者：在 Firefox 3 中，我们引入了对带标签图像中颜色配置文件的支持，但默认情况下它是禁用的。在 Firefox 3.5 中，我们能够使颜色校正过程比 Firefox 3 中快约 5 倍，因此我们已启用对带标签图像的颜色校正的支持。
网络上的大多数图像都没有标签。如果您不知道带标签图像和未标记图像之间的区别，那么您很可能不会注意到此更改。但是，我们建议您继续阅读，了解如果您想包含它们，它可能对您意味着什么，以及未来的 Firefox 版本可能会如何改变 CSS 颜色与图像之间的交互。
什么是颜色配置文件？
那些花费大量时间拍摄照片或进行任何类型的高分辨率彩色打印的人会理解，许多输出设备（LCD、CRT、纸张等）对各种颜色的含义都有非常不同的解释。例如，未校正的红色在 LCD 上看起来与在 CRT 上看起来非常不同。如果您将两个非常不同的显示器并排放置，并且操作系统不进行颜色校正，您就可以看到这一点——其中一个显示器中的颜色看起来会更褪色，而另一个显示器则不然。
JPG 和 PNG 图像都支持颜色配置文件。这些颜色配置文件允许 Firefox 获取图像中的颜色并将它们转换为独立于任何特定设备的颜色。
虽然图像包含颜色配置文件，但需要注意的是，显示器等输出设备也具有颜色配置文件。例如，输出设备可能更擅长显示红色而不是蓝色。当您准备在该设备上显示“红色”内容时，可能需要将其从中性 #ff0000 值转换为 #f40301，以便在屏幕上显示为红色。
这意味着实际上有两种颜色配置文件转换。首先是获取图像中的原始颜色信息，并使用颜色配置文件将其转换为与设备无关的颜色空间。然后，一旦它进入该独立空间，您就使用输出设备的颜色配置文件再次将其转换，使其准备好显示在输出设备上。
那么 CSS 颜色呢？
了解颜色配置文件的工作原理以及它们如何转换，才能正确理解 CSS 如何与这些颜色空间交互。
在 Firefox 3.5 中，我们认为 CSS 颜色已经位于设备输出的颜色空间中。换句话说，CSS 颜色不在中性颜色空间中，并且不会像带标签图像那样转换为输出设备。
这意味着如果您有一个带标签的图像，其中预期某种颜色与它旁边的 CSS 匹配，则它不会匹配。或者至少在某些输出设备上它可能不会匹配——也许不是您碰巧用于开发的设备。请记住，不同的输出设备具有不同的颜色配置文件。这是一个示例：
在 Firefox 3 中，这看起来像一个连续的紫色块。在 Firefox 3.5 和 Safari 中，您会注意到一个紫色框内嵌套着另一个紫色框（除非您的系统配置文件为sRGB）。这是因为图像经过颜色校正，而周围的 CSS 没有。
这就是关于未来的声明的来源。在未来的 Firefox 版本中，我们可能会使人们能够为带标签的图像和 CSS 启用颜色校正。您可以通过更改 Mozilla 开发者中心页面上列出的首选项来测试此设置颜色校正 为“完全颜色管理”。在这种情况下，未标记的图像应该继续工作，因为我们将以 sRGB 颜色空间呈现 CSS 和未标记的图像。
图像支持和工具
PNG 可以通过三种不同的方式进行标记。首先，它们可以具有包含关联 ICC 配置文件的 iCCP 块。其次，它们可以使用 sRGB 块显式标记为 sRGB。最后，它们可以包含描述图像伽马和色度的 gAMA 和 cHRM 块。使用任何这些方法都会导致 Firefox 对图像进行颜色校正。
您可以使用pngcrush删除所有颜色校正块，从而生成未标记的图像。
pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB infile.png outfile.png
或者，您可以使用TweakPNG手动删除 gAMA、cHRM、iCCP 和 sRGB 块。
关于 Christopher Blizzard
一次发布，让网络更美好。
156 条评论