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

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
• 腾讯云cos 数据万象

我发现一但移除oss的处理参数后，颜色是正常的，但是为什么颜色会变呢，这个也排查了半天，最终我把图片下载下来后才发现问题所在。我移除了oss参数下载了图片然后用ps打开后发现了坑点如下图

ps_cmyk

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

ps_rgb

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

解决方案

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

cmyk_to_rgb

后记

上述的图片模式玩过ps，第一堂课就会说cmyk和rgb的关系的呢

• 本博客持续修改与更新中，点击这里查看最新的内容