这红色进入#FG0000:宽敞的色彩颜色<Picture> and Cloudinary

经过 WDD员工  |  可能。 23,2017

最近,我有乐趣阅读Craig Hockenberry的短,甜蜜和信息 弄清楚颜色管理. 在这本书中,克雷格指出,虽然新的,高DPI屏幕向我们提供更多 解析度 比我们的眼睛实际上可以看到,他们无处可去,能够生产所有 颜色 我们能够感知。

令人兴奋的是,这开始改变。我们的图形堆栈的各种长停滞碎片倾向于更加充满活力的未来。在屏幕上令人惊讶的下一个前沿是宽敞的 color.

 

宽曲面屏幕

在过去的20年中,显示行业已落在有限,标准的颜色范围内,称为 SRGB色域.

如果不平衡,切碎的彩虹盘下面(技术名称:“1931 CIE Cheromationity图”)代表了人眼可以看到的所有颜色,SRGB色域被中间的小三角形限制。

最新的显示器 可以生产 SRGB有限范围之外的颜色。这些屏幕扩展了可能性的三角形,所谓的 P3色域:

与SRGB相比,P3色域。它更大!

三角形是一回事,实际照片是另一张 - 对于这种更广泛的范围在实践中,乞求,借用或窃取宽敞歌剧展示的感觉,请查看 Craig的华丽示例图像,或看 这个快速的例子,从你的真实。基本上,如果你的主题是 真的 饱和(例如:白炽日出,或明亮 - 绿草)P3将让您的图像 流行音乐 以新的和明显的方式。但是如果您的图像的调色板更柔和,SRGB已经覆盖,您会看到没有明显的差异。

所以 - 可以显示的设备 新的,更充满活力的颜色 是运输 en masse。 我们怎样才能利用它们,而不会为其他人拧紧件事?

 

广域资源

首先,我们必须生成包含这些新颜色的文件。通常,您可以通过确保:1)您的相机正在捕获 - 2)您的软件正在编辑 - 并且,至关重要的是,3)您是 出口 - 在一个宽敞的赌场(如 P3, adobe. RGB. , 或者 adobe. Prophoto.)。并且别忘了嵌入一个 颜色简介.

有关如何使用Photoshop进行的详细教程, 买克雷格的书!

但是,如果您有一个闪亮的新iPhone,则不必担心在模糊的偏好窗格中担心您的PS和QS。 iPhone 7捕获,流程和保存P3色域外的照片。

 

网上的宽敞障碍

好的,让我们说你已经捕获了美丽的日出和生产 带有嵌入式配置文件的宽游戏模式JPEG。伟大的!您将如何与世界分享该形象?

让我们首先使用单一标记它 - SRC.<img>:

<img src=”sunrise-p3.jpg” alt=”Oranges and blues” />

在实现“颜色管理”的浏览器中 - 知道如何使用图像的嵌入式配置文件将图像的宽敞曲面颜色映射到设备的特定屏幕 - 日出将随着硬件允许的方式看起来好。它会在SRGB-ISH屏幕上看起来很好, 伟大的 在宽游戏模式上。但 很多浏览器都是 不是 color managed。和颜色 - 联合国 托管浏览器,图像中的原色值直接绘制到屏幕,不考虑文件的广泛功能如何与显示的有限范围有关。这导致沉闷的图像 - 比我们刚刚刚刚刚刚离开并在SRGB中导出我们的形象:

在彩色非托管显示器上的充满活力,SRGB日出和一个沉闷,宽阔的色域日出的比较

在Color-Dumb浏览器中,宽敞的曲目图像 更差 而不是他们的窄球场,SRGB对应物。

我们对这种悲惨的事态做了什么?不幸的是,没有简单的方法来测试浏览器是否被颜色管理。但我们 能够 询问浏览器如果屏幕的配置文件更加SRGB样或P3-esque,则使用全新 彩色色域 media query。如果我们在a中使用此查询 <picture> 元素,我们可以确保我们只向宽游戏屏幕发送宽游戏图像 - 并将SRGB图像发送给其他人:

<picture>
<source media="(color-gamut: p3)" srcset="Sunrise-p3.jpg." />
<img src="sunrise-sRGB.jpg" alt="橘子和蓝调" />
</picture>

那个,我的朋友,是一种颜色适应性响应图像。整洁的!

 

响应颜色与云

没有关于它的骨头,创造敏感的图像资产是 乏味。无论您是渲染多个分辨率,作物,格式,还是现在, 颜色赌场 - 生成资产的备用版本的任务是自动化的成熟。

进入 cloud.

Cloudary的Color-Smarts仍在不断发展,但今天,该服务有两个关键功能:

  1. 如果上传的图像具有颜色配置文件,则鼠标覆盖保留。
  2. Cloudary可以使用该图像将任何图像转换为SRGB cs_srgb. transformation.

所以,如果我们生成一个宽敞的曲目曲目并将其上传到 cloud,我们可以自适应地提供颜色,如下所示:

<picture>
<source
media="(color-gamut: p3)"
srcset="//res.cloudinary.com/eric-cloudinary/image/upload/sunrise.jpg" />
<img
src="//res.cloudinary.com/eric-cloudinary/image/upload/cs_srgb/sunrise.jpg"
alt="橘子和蓝调" />
</picture>

此模式允许我们生成单个,宽敞的色域资源,并以一种看起来非常适合某些的方式交付它 每个人。 ✨☺️??✨

 

准备好任何东西

随着屏幕开始沿着这种新轴演变 - 成为 更加多彩 - 看看以应对视网膜革命的技术和工具,所以准备解决新的挑战,这是令人欣慰的。在不断发展的,始终多样化的Web上,将位图图像适应变化浏览上下文是一般问题,响应图像标记模式 - 与集中式,自动图像处理背面配对 cloud - 无论细节,都在这里解决它。

所以 - 用p3武装, <picture>和云的 cs_srgb勇敢地向上航行到更广泛的颜色世界.

 

[–这是代表云的赞助帖子–]