OSS对象存储图片处理后颜色失真

ISSUE

前段时间小弟接到一个 issue 是说在使用对象存储的图片处理后部分图片在手机上颜色失真了 😂, 这个让我让很不理解,也排查了好长时间,大体就是下面这个效果

  • 下面这张没有处理的 dio

dio_cmyk

  • 下面这张是由 oss 处理后的 dio, (加了 ?x-oss-process=image/resize,m_lfit,limit_0,w_1000)

dio_cmyk

由上两张图可能看到的是,下面一张的 dio 明显更yellow 而且看起来更high 于上面一张

排查

当前大多数的网站都喜欢使用对象存储上的图片处理来压缩线上的图片资源,如调整大小和格式化图片格式为 webp 之类的更适合 web 所使用的格式。而且常见的对象存储都是这些参数的,一般就是在图片后面拼个 query 参数就可以,还是比较简单易用的 😎;相关的文档比如:

我发现一但移除 oss 的处理参数后,颜色是正常的,但是为什么颜色会变呢? 最终我把图片下载下来后才发现问题所在, 我下载了图片然后用 ps 打开后发现了问题所在

ps_cmyk

如上图所示,这张图片的颜色模式cmyk 的,cmyk是用于是印刷用的四色模式, 而显示器所用的模式是rgb, 如下图

ps_rgb

这样的话解释就很合理了,当前的图像处理都是基于颜色通道处理的,rgb有红,绿,蓝三色通道,而cmyk 有青色,洋红,黄色及补色的黑色通道. 个人猜测是添加图像处理参数后, oss 把cmyk 的四通道当成三通道处理,最终结果就是少了一个色彩通道了。

解决方案

让 ui 同学修改图片模式为rgb后,重新上传, 具体操作就是在ps图像->调整->模式->rgb

cmyk_to_rgb

后记

上述的色彩模式玩过 ps 大部分课程第一堂课就会说cmykrgb的关系 🤔, 还好玩过 ps, 不让还真找不到原因.