图像生成技术发展趋势

During the last world football cup, few people knew that only the flags of Argentina and France out of the top 10 teams could be accurately displayed on a standard HDTV. All the remaining flags colors were clearly out of gamut. That is, standard displays were not capable of reproducing the colors properly. Only those fans using wide gamut sets could see their colors in a 4K HDR broadcast.

在上一届世界杯足球赛期间，很少有人知道在前10名球队中只有阿根廷和法国的国旗才能准确显示在标准高清电视上。 其余所有标志的颜色显然都超出了色域 。 即，标准显示器不能正确再现颜色。 只有使用宽色域设置的粉丝才能在4K HDR广播中看到他们的颜色。

As for a web workflow, it is much more involved than the display properties. Textures, saturation, hue or brightness may be far more important in other industries than in football — just think of fashion or the art imagery in ecommerce. In such cases, clean color management is key to deploying healthy and reliable image and video processing and optimization pipelines.

对于Web工作流程，它比显示属性要复杂得多。 在其他行业中，纹理，饱和度，色相或亮度可能比足球更重要-想到电子商务中的时尚或艺术意象。 在这种情况下，干净的色彩管理对于部署健康，可靠的图像和视频处理以及优化渠道至关重要。

However, color management in ecommerce and in general in web workflows may unfold as a tricky issue. My recent experience with complex ecommerce teams involving photographers, retouchers and devops to debug and deploy image and video optimization solutions only reinforces this idea.

但是，电子商务中以及通常在Web工作流程中的颜色管理可能会成为一个棘手的问题。 我最近在复杂的电子商务团队中的经验，这些团队涉及摄影师，润饰师和开发人员，以调试和部署图像和视频优化解决方案，这只会强化这种想法。

In this article, I shortly revise the basic concepts involved in color management, the best practices, and the challenges posed by the latest trends in display technology.

在本文中，我将简短地修改与色彩管理有关的基本概念，最佳实践以及显示技术的最新趋势带来的挑战。

人眼中的色彩 (Color in the human eye)

Humans with healthy color vision have three types of color detectors in the retina. Each of these types of detectors respond with different strengths to spectral colors, from red to violet. As a result, any physical color that we perceive can be represented as the combination of three chromatic primaries.

色觉健康的人在视网膜中拥有三种类型的颜色检测器。 从红色到紫色，每种类型的检测器对光谱颜色的响应强度不同。 结果，我们感知到的任何物理颜色都可以表示为三个色原色的组合。

This fact allowed us — nearly 90 years ago — to define the first colorimetry standard to convert the physical magnitudes of light into a numeric representation uniquely related to colors. It set the basis to accurately represent any color (of light reaching the eye) by a simple array of three numbers.

这一事实使我们(将近90年前)定义了第一个比色标准，将光的物理量转换为与颜色唯一相关的数字表示形式。 它通过三个数字的简单阵列为准确表示任何颜色(到达眼睛的颜色)奠定了基础。

相机和显示器 (Cameras and displays)

Digital cameras and displays were designed to convey images of scenes that a human eye is able to see as if it were right there looking at them. So, cameras capture a trichromatic representation of the scene and code it in a digital file.

数码相机和显示器的设计目的是传达人眼能够看到的场景图像，就好像它们正盯着它们观看一样。 因此，摄像机捕获场景的三色表示并将其编码为数字文件。

To do this, cameras simply :) have three types of light detectors (R, G, and B) like our retina has. Likewise, displays transform digital values in trichromatic signals that drive the generation of light to recreate the image stored in a digital file. To do it, displays simply :) have three types of light emitters (R, G and B).

为此，照相机简单 :)具有与我们的视网膜相同的三种类型的光探测器(R，G和B)。 同样，显示器会转换三色信号中的数字值，从而驱动光的生成以重新创建存储在数字文件中的图像。 为此，显示器很简单 :)具有三种类型的发光器(R，G和B)。

It seems easy: The camera mimics the eye and the display projects light to mimic the scene, finally conveying it to the eye, anytime, anywhere.

看起来很简单：相机模仿眼睛，显示屏投射光线以模仿场景，最终将其随时随地传送到眼睛。

But there are…

但是这里有…

一些基本问题 (Some fundamental problems)

Some related to the physics and some related to perception.

有些与物理有关，有些与感知有关。

需要校准 (Need to calibrate)

Just to start with, the spectral sensitivities of the three detectors of a camera sensor are different — very different indeed — from our eye’s light detectors (our eye’s detectors are not R, G, and B). Moreover, different camera sensors exhibit quite different behaviors (their R, G, and B are different). Color perception is clearly non-linear with physical magnitudes like the intensity of light. But sensors are typically linear with light intensity.

首先，相机传感器的三个检测器的光谱灵敏度与我们的眼睛的光检测器(我们的眼睛的检测器不是R，G和B)不同，的确不同。 此外，不同的相机传感器表现出完全不同的行为(它们的R，G和B不同)。 颜色感知显然与光强度等物理量呈非线性关系。 但是传感器通常与光强度呈线性关系。

In the end, this means that to provide accurate color representations, cameras should be calibrated. Calibration is done by shooting an image of a pattern of colors. A color profile is then created that transforms the sensor response into a standard representation of color. But this should be done for different lighting.

最后，这意味着要提供准确的颜色表示，应该对相机进行校准。 通过拍摄彩色图案的图像来完成校准。 然后创建颜色配置文件，该配置文件将传感器响应转换为颜色的标准表示形式。 但这应针对不同的照明进行。

Put in simple words, if we seek true color fidelity we would need to calibrate to correct color for each new scene! And any slight change of lighting means that the scene has changed as well. Fortunately, depending on the specific need of accuracy and the flexibility of the workflow, the requirements of calibration can be relaxed.

简而言之，如果我们追求真实的色彩保真度，则需要针对每个新场景进行校正以校正色彩！ 灯光的任何细微变化都意味着场景也发生了变化。 幸运的是，根据精度的特定需求和工作流程的灵活性， 可以放宽对校准的要求 。

Something similar happens to displays, but the other way. They translate the colors coded within image files into light emitted. Slight changes in the amount of light emitted have an impact on the color effectively displayed.

类似的事情发生在显示器上，但是相反。 它们将图像文件中编码的颜色转换为发出的光。 发光量的轻微变化会影响有效显示的颜色。

That’s why professional displays need to be calibrated from time to time. The light emitted for some primaries is checked and a display color profile is created. This profile is used to transform the stored pixel values to actual light with the intended color. Needless to say, user displays are not calibrated, but they usually have a factory color profile instead.

这就是为什么专业显示需要不时进行校准的原因。 检查某些原色发出的光，并创建显示颜色配置文件。 此配置文件用于将存储的像素值转换为具有预期颜色的实际光。 不用说，用户显示未经校准，但通常具有工厂颜色配置文件。

We should acknowledge that current LED technology has greatly limited the variation of color properties among different units of the same display model and also in the same display through time.

我们应该认识到，当前的LED技术已经极大地限制了相同显示模型的不同单元之间以及同一显示器中不同时间之间颜色属性的变化。

仍然……感知技巧 (Still… perception tricks)

If all this were not enough, our brain excels in assuring color constancy under different lighting conditions. To do it, a variety of mechanisms are constantly adjusting perception in order to match the expected color based on the scene context. This is done regardless true values of the physical color. You may pick the digital RGB values in A and B in this classic illusion (check the original here, since Medium alters the image).

如果这还不够，我们的大脑将在确保在不同光照条件下的色彩稳定性方面表现出色。 为了做到这一点，各种机制不断地调整感知，以便根据场景上下文匹配预期的颜色。 无论物理颜色的真实值如何，都可以这样做。 您可以在这种经典错觉中在A和B中选择数字RGB值(在此处检查原始值 ，因为Medium会改变图像)。

They are exactly the same: The display sends the same light from each of them. Even after knowing so, you will see A darker than B. I see it as I’m writing this. Such a tricky perception is a powerful reason for many photographers to adjust colors by hand rather than using a calibrated scene reference.

它们是完全相同的：显示器从它们每个发出相同的光。 即使知道了这一点，您也会看到A比B暗。我在撰写本文时也看到了它。 这种棘手的感觉是许多摄影师手动调整颜色而不是使用经过校准的场景参考的强大原因。

色彩管理 (Color management)

However, things may still get worse, much worse. At this point, we should have noticed that speaking about color with the same language is important if we want to keep consistent. To accomplish this need, we should manage color. In other words, our software should be color managed. A failure to manage color in a web workflow will undermine the consistency of the user experience.

但是，情况可能还会变得更糟，甚至更糟。 在这一点上，我们应该已经注意到，要保持一致，用相同的语言来谈论颜色是很重要的。 为了实现这一需求，我们应该管理颜色。 换句话说，我们的软件应进行颜色管理。 如果无法在Web工作流程中管理颜色，则会破坏用户体验的一致性。

With this aim, different color spaces have been developed. Each color space aims to support a use case in the best possible way. Three examples of use cases are:

为了这个目的，已经开发了不同的色彩空间。 每个颜色空间旨在以最佳方式支持用例。 用例的三个示例是：

• average display technology平均显示技术
• printing of photos打印照片
• 4K HDR video and cinema4K HDR视频和电影院

Each color space has an associated color profile to interpret the stored RGB values in a file. There are many handy tools out there to check the color space of an image. For instance, the inspector tool of Preview in Mac.

每个颜色空间都有一个关联的颜色配置文件，以解释文件中存储的RGB值。 有很多方便的工具可以检查图像的色彩空间。 例如，Mac中“预览”的检查器工具。

To check every detail about an image, I find it very convenient to use exiftool. It reveals the color profile, among many other metadata.

要检查有关图像的每个细节，我发现使用exiftool非常方便。 它揭示了颜色配置文件以及许多其他元数据。

exiftool test.jpg

You should see something like this

你应该看到这样的东西

With videos, Mediainfo is a handy tool with a simple and usable graphic interface. Putting the pointer over the Video area, detailed metadata of the video appears, including the color space at the bottom.

有了视频，Mediainfo是一个简单易用的图形界面的便捷工具。 将指针放在“ 视频”区域上，将显示视频的详细元数据，包括底部的色彩空间。

经典色彩配置文件 (Classic Color profiles)

sRGB: based on Rec. 709

sRGB：基于Rec。 709

Created by HP and Microsoft, this color space was specially aimed at the Internet. It is based on BT.709 (or Rec 709) standard for video, adding gamma suited to CRT displays. But it’s also suited to average human perception. This means that it makes an efficient use of the dynamic range.

由HP和Microsoft创建的此色彩空间专门针对Internet。 它基于BT.709(或Rec 709)视频标准，添加了适合CRT显示器的伽玛。 但这也适合一般人的感知。 这意味着它可以有效利用动态范围。

This is the color space universally supported throughout the web. Any image (or web element) without an explicit color profile (that is an undefined color space) will be interpreted by any web browser as being sRGB. Moreover, any decent display is sRGB capable: it can reproduce the whole sRGB color gamut. At the time of this writing, this is the safest color space in a web context.

这是整个网络普遍支持的色彩空间。 没有显式色彩配置文件(即未定义的色彩空间)的任何图像(或Web元素)将被任何Web浏览器解释为sRGB。 此外，任何体面的显示器都具有sRGB功能：它可以再现整个sRGB色域。 在撰写本文时，这是Web上下文中最安全的色彩空间。

If you assure that ALL your workflow, from studio to web delivery, is (well) done in sRGB, then the colors of the images in your web will be consistent for everybody. You may be confident of this.

如果您确定从工作室到网络交付的所有工作流程都以sRGB(很好)完成，那么网络中图像的颜色将对每个人都是一致的。 您可能对此充满信心。

In case you find a non sRGB image and you need a quick fix, Little CMS is a handy tool to get the job done. Whatever color profile has the image, you may convert it to sRGB by simply using

如果发现非sRGB图像并且需要快速修复， Little CMS是一种方便的工具来完成工作。 无论使用哪种颜色配置文件，都可以通过简单地将其转换为sRGB

jpegicc -q100 input.jpg output.jpg

However, remember that the best practice is working from the beginning in sRGB. When transforming from a wider space, out of gamut colors may be treated differently — and in some cases colors may be clipped while in other cases they may be washed out. It depends on the rendering intent.

但是，请记住，最佳实践从一开始就在sRGB中起作用。 从更广阔的空间进行转换时，超出色域的颜色可能会有所不同-在某些情况下可能会剪裁颜色，而在其他情况下可能会洗掉颜色。 这取决于渲染意图 。

The inconvenience of sRGB is that your gamut will be more limited than a good percentage of current display technology, with this percentage increasing steadily. Recall the beginning of this article. Unless you are French or Argentinian, chances are that you won’t see your country colors properly in a standard sRGB monitor. Or in other contexts, everybody buying cloths online is deciding purchases based on untrue colors (shown on uncalibrated displays!). But if the web sticks to sRGB, the mismatch experienced by each user will be at least consistent, limiting the chance of bad surprises.

sRGB的不便之处在于，与现有显示技术的一个很好的百分比相比，您的色域将受到更大的限制，并且这个百分比会稳定增长。 回顾本文的开头。 除非您是法国人或阿根廷人，否则很有可能在标准sRGB显示器中看不到正确的国家/地区颜色。 或在其他情况下，每个人在网上购买布料都是根据不真实的颜色(显示在未经校准的显示屏上！)决定购买衣服。 但是，如果网络坚持使用sRGB，则每个用户遇到的不匹配现象至少会保持一致，从而限制了出现意外情况的可能性。

Adobe RGB

Adobe RGB

It is the classic color space used in the graphics industry. It has a wider gamut than sRGB and covers fairly the gamut relevant in the production of prints. To work with it, you will need a profesional calibrated wide gamut display capable of Adobe RGB.

它是图形行业中使用的经典色彩空间。 它的色域比sRGB宽，并且涵盖了与印刷品生产相关的色域。 要使用它，您将需要具有Adobe RGB功能的专业校准广色域显示器。

Unless images are intended to be printed rather than viewed in a display, this color profile does not make sense in a web workflow. I include it here because I have found it several times in such a context.

除非打算打印图像而不是在显示器中查看图像，否则此颜色配置文件在Web工作流程中没有意义。 我将其包含在此处是因为我在这种情况下已多次找到它。

Since it is the preferred color space of photographers and retouchers that print their work, some people think of it as implying higher quality than sRGB. Adjusting color in a color space and saving the image in a different one may end up being a waste of time and bringing unexpected results, specially in the presence of highly saturated tones.

由于它是摄影师和润饰师打印作品的首选色彩空间，因此有人认为它暗示着比sRGB更高的质量。 在色彩空间中调整颜色并将图像保存在其他图像中可能会浪费时间并带来意想不到的结果，尤其是在存在高度饱和色调的情况下。

If you are asked to optimise pristine images with this color profile you are likely facing upstream issues coming from the retouching or studio teams. Problems may be even worse if you find Adobe ProPhoto, with an even larger gamut.

如果要求您使用此颜色配置文件优化原始图像，则可能会遇到来自润饰或工作室团队的上游问题。 如果您发现色域更大的Adobe ProPhoto，问题可能会更加严重。

新的广色域色彩空间 (New wide gamut color spaces)

DCI-P3 (or simply P3).

DCI-P3(或简称为P3)。

This color space has been adopted by Apple in their wide gamut displays since 2016. Other brands recently embracing wide gamut have also adopted P3. Although with a similar size to Adobe RGB, it spans a different gamut, better suited to displays — light projection technology — instead of prints. It is an intermediate step towards UHDTV, aimed at 8k TV and film industry. It is good for high quality streaming that may cater to 4K HDR capable displays.

自2016年以来，Apple已在其色域显示中采用了这种色彩空间。最近拥抱宽色域的其他品牌也采用了P3 。 尽管其尺寸与Adobe RGB相似，但它具有不同的色域，更适合于显示器-光投影技术-而不是印刷品。 这是面向8k电视和电影行业的UHDTV的中间步骤。 这对于高质量的流媒体很有用，可以满足支持4K HDR的显示器的需求。

The use of P3 results in much richer and deeper colors, with a true impact on user experience and color fidelity. Back to the world cup example, P3 would greatly improve the color fidelity and deliver true colors for most fans. It’s easy to think about a similar benefit for imagery in a fashion, cooking or traveling websites.

P3的使用会产生更丰富和更深的色彩，对用户体验和色彩保真度产生真正的影响。 以世界杯为例，P3将大大提高色彩保真度，并为大多数球迷提供真实的色彩。 很容易想到时尚，烹饪或旅游网站中图像的类似好处。

UHDTV /Rec. 2020

UHDTV / Rec。 2020年

This color space has been designed for 4k and 8k HDR TVs. It brings a wider gamut compared to P3. It contains P3 as well. Even for HDR TVs this standard is still the future. It does not make much sense in a today’s web workflow.

此色彩空间专为4k和8k HDR电视而设计。 与P3相比，它具有更宽的色域。 它还包含P3。 即使对于HDR电视，该标准仍然是未来 。 在当今的Web工作流程中，这没有多大意义。

比较色域 (Comparing gamuts)

If you own a wide gamut display and enjoy healthy color vision, a first hand visual check is the best and quickest way to understand and assess the differences among color profiles. A good starting point is to use wide gamut images specially prepared to compare color spaces.

如果您拥有宽色域的显示器并享有健康的色觉，则第一手的目视检查是了解和评估颜色配置文件之间差异的最佳和最快方法。 一个良好的起点是使用专门准备的用于比较色彩空间的广色域图像。

颜色的良好做法 (Good practices with color)

Unless you are determined to be a wide gamut pioneer, color management will be synonym of enforcing the sRGB color space throughout the image processing pipeline.

除非确定您是广泛的色域先锋，否则色彩管理将是在整个图像处理管道中强制执行sRGB色彩空间的代名词。

A good practice is to calibrate the camera at least with a dual illuminant calibration. Of course, the use of specific calibrations for specific lighting will always be better. In the studio, the more fixed your lighting settings are (so you don’t need to recalibrate), the better. If you directly shoot jpegs in sRGB instead of RAW, your calibration should be done in sRGB.

良好的做法是至少使用双光源校准来校准摄像机。 当然，对于特定的照明使用特定的校准将永远更好。 在工作室中，您的照明设置越固定(因此您无需重新校准)越好。 如果直接用sRGB而不是RAW拍摄jpeg，则应使用sRGB进行校准。

When iPhones are used to shoot, the color space may be an issue since iPhone cameras are set to DCI-P3 by default.

使用iPhone拍摄时，由于iPhone相机默认设置为DCI-P3 ，因此色彩空间可能会成为问题。

Just after shooting, any color correction in darkroom software should be already done in sRGB. Retouching should be done in sRGB. You will avoid issues related to rendering intent choice. The same applies to artwork and visual creativities.

拍摄后，暗室软件中的任何色彩校正都应该已经在sRGB中完成。 润饰应在sRGB中完成。 您将避免与呈现意图选择相关的问题。 这同样适用于艺术品和视觉创意。

The software used should be color managed. This is the case of most image editing and graphics packages. In the case of video, there was a notable exception: Adobe Premiere Pro versions prior to October 2018 did not manage color.

使用的软件应进行颜色管理。 大多数图像编辑和图形包就是这种情况。 在视频方面，有一个明显的例外：2018年10月之前的Adobe Premiere Pro版本无法管理颜色 。

If Premiere is used in post-production for web, the best practice is using a calibrated sRGB display. Otherwise, you may end up with video colors that will change (typically washed out) when viewed in the web. This is why so many Premiere users on iMAC displays usually oversaturate their videos, in order to avoid washed out exported results.

如果将Premiere用于Web的后期制作，则最佳实践是使用经过校准的sRGB显示屏。 否则，您最终可能会看到在网络上观看时会改变(通常会褪色)的视频颜色。 这就是为什么iMAC显示屏上的许多Premiere用户通常会过分饱和视频，以避免冲走导出的结果。

If the sRGB rule is observed, the only risks to color due to generation and optimization of derivatives will be compression artifacts related to low q values or excessive chroma downsampling.

如果遵守sRGB规则，则因导数的生成和优化而导致变色的唯一风险将是与低q值或过多色度下采样有关的压缩伪像 。

Don’t be fooled by old stuff posted saying that browsers are not color managed. It’s only the proof that being highly ranked in Google search is no guarantee of accurate and up to date information. All the major web browsers (from Safari, to Firefox, Edge, or Chrome) are currently color managed and capable of interpreting ICC profiles.

不要被张贴有浏览器不受颜色管理的旧文章所迷惑。 这仅是证明在Google搜索中排名靠前并不能保证信息的准确性和最新性。 目前，所有主要的网络浏览器(从Safari到Firefox，Edge或Chrome)都进行了颜色管理，并能够解释ICC配置文件。

If you have many iOS and macOS users you may be tempted by the P3 color space. You would bring them a much more realistic experience, with far more vibrant colors.

如果您有许多iOS和macOS用户，您可能会被P3颜色空间所吸引。 您将为他们带来更加逼真的体验，并拥有更加鲜艳的色彩。

But in 2019 it is still a risky move. All the other users with average sRGB displays may experience either washed out or oversaturated images. The impact will always depend on the specific picture and the browser, since browsers may use different rendering intents. For instance in macOS — as of January 2019 — Chrome (version 71) and Safari (version 12) use perceptual intent, while Firefox (version 64) uses colorimetric intent.

但是在2019年，这仍然是一个冒险的举动。 其他所有具有sRGB平均值显示器的用户可能会遇到褪色或过饱和的图像。 影响将始终取决于特定的图片和浏览器，因为浏览器可能使用不同的呈现意图 。 例如，在macOS中(截至2019年1月)，Chrome(版本71)和Safari(版本12)使用感知意图，而Firefox(版本64)则使用比色意图。

Serving two manually adjusted versions to take the wide gamut advantage on iOS users while still serving optimum sRGB images… would require you to adjust colors in both spaces. The benefits are unlikely to balance the burden for photography and retouch teams.

提供两个手动调整的版本以在iOS用户上获得广泛的色域优势，同时仍提供最佳的sRGB图像…将需要您在两个空间中调整颜色。 这些好处不太可能平衡摄影和润饰团队的负担。

摘要 (Summary)

A good practice from studio to web is sticking end to end to the same color space. In most (practically all) cases this means sticking to sRGB.

从工作室到网络的一个好习惯是端到端地坚持相同的色彩空间。 在大多数情况下(实际上是所有情况)，这表示坚持使用sRGB。

When different sources of images and video cater to the workflow, this requires awareness for all the people involved in the image creation and processing chain.

当不同的图像和视频源适应工作流时，这要求图像创建和处理链中涉及的所有人员都具有意识。

However, display technology has recently moved from racing on resolution to racing on color gamut. So, we should keep an eye on the P3 color space and the tech used by our users. As more and more of them purchase wide gamut displays, switching to images with a P3 color profile may start to make sense.

但是，显示技术最近已从分辨率争夺转向色域争夺。 因此，我们应该关注P3色彩空间和用户使用的技术。 随着越来越多的人购买宽色域显示器，切换到具有P3颜色配置文件的图像可能开始变得有意义。

翻译自: https://www.freecodecamp.org/news/color-management-for-the-web-the-challenges-from-iphone-to-chrome-b07cb44ad21b/

图像生成技术发展趋势