iOS 朋友圈 颜色管理问题

[JCZ2MkKb5S8ZX9pq]

简述

• 直接截图发送到朋友圈的图片饱和度低。

操作手顺

• iOS 选一个有大红色的画面，截屏。
• 直接在截屏编辑页面，分享到朋友圈。图 1
• 把截屏保存到相册。图 2

问题点

• 朋友圈看到的图 1，红色会比较灰比较低饱和。
• 直接存到相册的图 2，跟截屏时所见一致。
• 电脑端查看这两张图片，也是同样症状。

问题分析

• 直观感觉应该是颜色管理的问题。
• 系统截图是 png，Display P3。
• 截图界面直接分享的是压缩过的 jpg，到了朋友圈之后应该是 sRGB，灰掉了。
• 截图界面直接分享给微信联系人，图片还是 jpg，但颜色是正常的，颜色模式还是 Display P3。
• 所以应该是朋友圈上传图片，在 color profile 转换这个环节没做好。

---

PS：截图直接分享，默认都会把图缩小然后发 jpg 缩略图，不知道 apple 为啥这么干。画面简单时 png 画质更好更省容量啊。

[CommandZi]

截图 Airdrop 分享到 Mac。
截图保存相册，相册 Airdrop 分享到 Mac

前一种方式是压缩过的 Display P3 模式的 jpeg 格式，后一种是 Display P3 模式的 png 格式。
不管是画面简答还是画面复杂，jpeg 格式大小都是小于 png 格式。

PS：此外我还发现一个有趣的细节，桌面的 icon 右上角的红点和下面的 UIPageControl 的圆点有根据陀螺仪改变细微的位置，类似当年 iOS6.0 音量按钮的阴影。

[JCZ2MkKb5S8ZX9pq]

@CommandZi 第一张图 jpg 尺寸较小这个有点出乎我意料。
一般来说图像的比特尺寸，主要还是取决于复杂程度，越复杂的情况下，jpg 容量越小。比如照片。
画面简洁的时候，应该就是 png 比较小且无损。比如纯文字或者简单 UI。
这里 jpg 小于 png 可能是采用了很大的压缩率，边缘抖动很严重了吧。

UI 重力感应我记得设置里可以开关。

[CommandZi]

@JCZ2MkKb5S8ZX9pq https://drive.google.com/open?id=1OsWGulZArBKbzeKLU1EZekx_KA4gRFhI
原图，你可以对比一下。我放大到像素级也没看出区别

[JCZ2MkKb5S8ZX9pq]

@CommandZi 差异的确非常细微。
红色为差异像素。
https://upload-images.jianshu.io/upload_images/12329419-21ea5de10b671757.png

---

但是用 PS 另存一个带 colorprofile 的 png，大小为 59k。
https://upload-images.jianshu.io/upload_images/12329419-2b69d96113e345a1.png

用 PS 存一个 80 压缩的 jpg，大小为 91k。（质量 100 为 111k，如果用 python 的 PIL 应该更小。）
https://upload-images.jianshu.io/upload_images/12329419-747753e947b7b755.jpg

---

相比一开始的 png 202k 和 jpg 105k，只能认为是 apple 存储时用了比较奢侈的方式，所以两个画质都很高。
甚至出现了 png 渲染简单画面尺寸大于 jpg 的情况。
导致这种情况的原因可能时 apple 新的文件格式在存储导出环节做了某种格式转换吧。

---

PS：png 处理简单图形主要是因为 png 记录图片的方式，和保存图片的压缩算法导致的必然。有兴趣可以看先 png8，然后看 png24。
早年做诺基亚游戏的时候，为了极限压缩，专门研究过一下。

[JCZ2MkKb5S8ZX9pq]

@CommandZi 用 PIL 读了一下文件，发现可能 16 位色是造成文件巨大化的重点。PS 压出来的是 8bit。另外它还带了 alpha 通道。
https://upload-images.jianshu.io/upload_images/12329419-7eec1c5a68ea3f0a.png

但理论上即便是 16bit 的 png，如果做了差分还有 LZ77 啥的压缩的话，应该还是会小很多的。毕竟算法本身就是把相同的色块图形缩写。只不过没索引的时候 png24 写颜色，有索引的话 png8 只写编号会更小。不清楚 apple 咋搞的。

[JCZ2MkKb5S8ZX9pq]

@CommandZi 而且一个蛮有意思的现象是，在我的显示器（普通 dell，估计支持 8bit ）上，PS 显示你截图 UI 那个灰底，是用斜 45 度的两种不同灰度来表现的。
不论放大缩小，这种网格大小不变，类似表示透明的灰白格。
如果转为 8bit，则这种网格消失。
再转回 16bit，因为颜色已经对齐到 8bit 整数位，所以那个交错灰格也不会再现。
也就是说，原始 16bit 的 png，真的包含了一个 8bit 无法表现的灰度。
也许在最新的 mbp 上，屏幕可以直接表现这个灰度，而无法再现。

---

直接截屏，可以截到这种表现方式。
https://upload-images.jianshu.io/upload_images/12329419-cf0c758efad6da47.png

看灰度图，右侧两条竖线，就表示这两个灰度在画面占比很大。
https://upload-images.jianshu.io/upload_images/12329419-0bfcabf53eab76b9.png

调整曲线，可以更清洗看到。
https://upload-images.jianshu.io/upload_images/12329419-89ef5cb10a46c20f.png

---

上图微信图标左侧还有两个竖线，不晓得什么鬼。
https://upload-images.jianshu.io/upload_images/12329419-2be9952f10b5ccc2.png