作者：码农贾维斯
提示：本文有视频版，位于 B 站同名账号下
10 CMYK
上一节说三原色红绿蓝的时候
可能有一些小伙伴会纳闷说，我记得小学学画画的时候
老师教的三原色是红黄蓝呀
我给你发个小奖状，因为你记得没错
红黄蓝和红绿蓝都是三原色
但红黄蓝指的是颜料三原色，而红绿蓝指的是光的三原色
它们的本质区别在于一个在吸光，一个在发光
在继续解释它们的区别之前，我必须先额外再教你们两种新的颜色
一、青色
这个同样位于七彩色红橙黄绿青蓝紫中的一个颜色
却无情地被几乎所有人忽略了
反而要给它起个什么水蓝、天蓝、绿蓝、蓝绿等等的名字
它的 RGB 值为 (R=0, G=127, B=255)，你可以在画图或 PS 中调一下这个颜色
二、品红/洋红/玫红
这个颜色应该是大部分女生最喜欢的颜色
当然它的名字可能不只这三种，这是一个介于红色、粉色和紫色之间的颜色
它的 RGB 值为 (R=255, G=0, B=127)，它有一个专业人员常用的简称“品”
如果你接触过彩色打印机的话
这时你就会明白打印机的墨盒或粉盒的颜色，为什么那么奇怪了
因为它不是红黄蓝，而是黄品青
品色英文 Magenta 代号 M，青色英文 Cyan 代号 C
还有个黑色墨盒或粉盒，英文 Black
但为了与蓝色 Blue 区分开，代号取其结尾字母 K
因此，所有 4 种颜色合称为 CMYK
这就是计算机显示领域与印刷领域
关于颜色的最大的区别：RGB 与 CMYK
了解完颜色名称，我们再看一下CMYK 与 RGB 在工作原理上的区别到底在哪
上一节已经了解到 LED 屏幕的发光原理，是将光线直接发射进入我们的眼睛
而颜料的颜色则是通过吸收环境中的白色漫反射光中的一部分
然后将它吸收不了的剩余光线再漫反射出来，进入我们的眼睛
因此它在黑暗的无光环境下就无法呈色
我们考虑黄色与青色混合
黄色 RGB 值为 (R=255,G=255,B=0)，会吸收全部的蓝色
青色 RGB 值为 (R=0,G=127,B=255)，会吸收全部的红色和一半的绿色
最终红绿蓝三种颜色的光线，只剩下了一半的绿色没有被吸收
这里的绿色只有一半了，所以就是亮度较低的深绿色
没有光的三原色红绿蓝中的绿色亮
这也符合我们小学画画时的直觉，如果不直接用亮绿色的画笔
而用黄色和蓝色混合来产生绿色时，你绝对画不出亮绿色来
11 Alpha 通道
之前说 JPG 的致命缺点有两个：
一个是有损压缩造成的失真，另一个是不支持半透明
半透明就是允许图片上一部分内容是透明的
从而可以让图片内容与周围环境更好地融为一体
比如 Logo 或者图标如果不支持半透明的话
网页会变成这个样子，电脑或手机桌面会则变成这个样子
这显然不是我们所希望的
如何实现这一点呢，就是需要在 RGB 三原色之外，再添加一个表示透明的信息
如果只用一个位，也就是非 1 即 0 的话
虽然可以实现上面的例子，但只能表示玻璃一样的纯透明
无法表示实际生活中的，像彩色玻璃、肥皂泡一样的保留了一部分原有色彩的半透明
而且 Logo 或图标与它们的背景的边缘，无法实现更自然的过渡，就会有锯齿感
因此实际中 更好的做法是：透明度信息也和 RGB 一样，采用相同的深度表示
在主流的 24 位色深中，也就是采用与 RGB 一样的
0-255 共 256 级的取值范围
这个透明度信息，用希腊字母中的第一个字母 Alpha 来表示
代号取大写，也就是与英文字母一样的 A
然后并到 RGB 中，就是 RGBA，这表示了有透明度信息的颜色值
那现在就有了 R、G、B、A 四个颜色分量
颜色分量这个数学术语，有一个更常用的计算机术语中叫做颜色通道 Color Channel
所以半透明通道一般称作 Alpha 通道
支持半透明，或者说有 Alpha 通道的 24 位色深
这时候就叫做 32 位色深了
用 PS 或者 http://Paint.NET 存储 BMP 格式图片时
色深设置里的 24 位和 32 位的区别就是
你是否要丢弃掉现有的透明度信息，也就是整个 Alpha 通道
是的，又老又弱的 BMP 格式，也是支持半透明的哦
前提是你不要用它的专属编辑器画图程序
需要用 PS 或者 http://Paint.NET 才可以
哦，对不起，说到这我突然想起来
PNG 那个小节都过去，又好几个小节了
我竟然没有说它支持半透明？好吧，它支持的
而且它一下子同时补齐了，JPG 格式全部的两个致命缺点
有损失真和不支持半透明
12 GIF
GIF 格式，也可以读作“基辅”或“给夫”
它的知名度应该比 PNG 还高，甚至还有可能比 JPG 都高
因为它盛行于网络聊天的斗图文化中，一个会动的搞笑图片，直接领先普通图片一个维度
它的特性与 PNG 较为相近，无损压缩、支持半透明
当然最重要的是它支持动画
GIF 动画的原理是，在一个 GIF 图片文件中存储了多张图片
以及每张图片之间的时间间隔
然后由浏览器或看图软件掐好秒表，一张一张地显示给你看
完了之后再从头开始 ，并不断重复，这很类似于翻页动画
看到这你可能会感觉，GIF 貌似比之前介绍的JPG 和 PNG 都要好呀
那为什么不能代替它们呢？这是因为它虽然支持的特性挺全面的，但每个都是半吊子
先说半透明，上一节说半透明的时候提到
PNG 不是用 1 个比特，是或非，而是用了 8 个比特
也就是 0-255 共 256 级来存储半透明信息的
因为用 1 个比特存储会有很多问题，而 GIF 就是用的 1 个比特
然后是它最大的问题，色深。目前几乎所有除 GIF 之外的图像格式
在 20 多年前都已经纷纷全部支持 24 位色深，也就是 1600 万色了
而 GIF 至今都，最高只支持 256 色，这正是 为什么看 所有的 GIF 图片
都有种 莫名的 年代感的原因
13 APNG
上一节说了 GIF 难登大雅之堂的种种劣势，但这原因要怪谁呢
我觉得要怪 PNG
之前说 PNG 名字的时候，已经知道开发它的最初目的是：照抄 GIF 的家庭作业
但问题是第一题半透明和第二题无损压缩你抄完了
但第三题动画你怎么不抄了呢
当然是因为 PNG 的开发组，喜欢拍脑袋和过几年再说
他们在 6 年后的 2001 年发布了 PNG 的支持动画版本的变种 MNG
当时的 Firefox 浏览器和另一个现今已经消失了的浏览器巨头网景 Netscape 早早就跟进了支持
可是他俩后来又觉得 MNG 的代码写的实在太烂
又纷纷在一两年后的 2003 年，将对 MNG 格式的支持给删掉了
这时只见另一个浏览器三巨头之一的 IE 浏览器，在一旁边吃瓜边笑
可是事情不能就这么了了
一年后的 2004 年，Firefox 的母公司 Mozilla 的两个员工不甘心
发明了另一个支持动画的PNG 格式的变种 APNG
他们在解决掉 MNG 烂代码问题的同时，还对 PNG 格式保持了向后兼容
向后兼容的意思是原有的 PNG 图片浏览器不需要升级
就可以直接显示新的带动画的 PNG 格式，只不过它不会动，只能够显示出第一帧
这虽然丧失了灵魂，有点太鸡肋了，但总比提示需要升级或者直接报错要优雅吧
由于是向后兼容，所以 APNG 格式的文件扩展名
可以是新定义的 .apng，也可以是原有的 .png
然后这俩员工一直苦口婆心地向自己的母公司 Mozilla 提议支持
但 Mozilla 心里想，他 PNG 官方的我都敢给删了
我还需要支持你个无名小卒的非标准格式？
但可能在这两个员工铁杵磨成针的不懈努力之下吧
Mozilla 终在三年后的 2007 年，于 Firefox 3.0 中加入了对 APNG 的支持
然后这时就变成 Mozilla 公司苦口婆心地到 PNG 组织处，申请让 APNG 加入 PNG 的官方标准
可能是由于对删他们的 MNG 代码，依然怀恨在心吧
该提议被 PNG 组织以 10:8 的投票进行了否决
一年后出生的 Chrome 浏览器，对这种情况感到不知所措
苦苦思索了 9 年，最终于 2017 年，站在了友商的一边，选择了支持 APNG
我认为这是一个非常伟大的选择，因为它选择了统一，而拒绝了权威
至此 APNG 受到了除当年的吃瓜群众，IE 浏览器之外的所有浏览器的支持
而 MNG 则没有任何一个浏览器支持，一场因抄作业不完整而导致的闹剧，就以此状态收场了
14 WEBP
到目前为，我们大致就把日常生活中，最常见到的几种图片格式都介绍完了
但你有没有发现最新的格式竟然是，发布于 1996 年的 PNG
那你有没有想问，从 1996 年，到现在的 2022 年
在这 26 年期间，计算机科学家和程序员都干嘛去了
睡大觉吗？
当然没有，他们一直都在一个起点极高，且没有尽头的方向上不懈努力着
半透明、无损、动画等这些特性，只有支持不支持，没有好与坏之分
所以这个没有尽头的方向就是“压缩率”
起点高是因为有 JPG 和 PNG 的存在
它们俩已经分别在有损和无损图像压缩领域，达到了登峰造极的程度
但你必须超过它们，才有存在的价值，而且需要大幅领先，才有可能被人们所接受
美剧硅谷就是围绕这个点而展开的
在这方面最成功的当属 WebP 格式
WebP 同时支持有损和无损两种模式
有损 WebP 平均比同等质量的 JPG 小 1/3，无损 WebP 平均比 PNG 小 1/4
WebP 也支持有损 + 半透明，这是 JPG 和 PNG 都做不到的
WebP 还支持高色深的动画，所以就不需要再纠结 APNG 和 MNG 了
因此它有潜力同时代替 JPG、PNG 和 GIF
WebP 是谷歌于 2010 年发布的图片格式
但此技术不是由谷歌自己开发的，而是由谷歌在头一年（2009 年）
花 1.65 亿美元，收购的视频压缩公司 On2 开发的
相当于谷歌把好东西买下来，然后免费给大家用
WebP 现今已广泛支持于各种网页浏览器、图像编辑器和第三方看图软件中
在国内网站里，豆瓣更把这个格式发挥到了极致
豆瓣网上几乎所有的图片都是 WebP 格式的，直到你点击了“查看原图”这个按钮
这时它会乖乖地把图片格式，由 WebP 切换回 JPG
这要拜“Windows 照片”这个系统自带的看图软件所赐
因为它不支持打开 WebP 格式的图片，即使装了自家的 “WebP 图像扩展”也不行
反而是它的上一代“Windows 照片查看器”是支持的
所以，微软的这一波降级操作是不是够骚
15 缩略图
缩略图，英文 Thumbnail
thumb 是拇指的意思，nail 是钉子或指甲的意思
连起来 thumbnail 就是拇指指甲的意思
用到计算机上就是指像拇指指甲一样大的图片
但指甲大的图片有什么用，单个这么小的图片是没什么用
但如果与对应的大图配起对来，就有用多了
如果你是 Windows 用户，你应该见过文件名为 Thumbs.db 的文件
而如果你是 Mac 用户，那你见到的应该是 .DS_Store 的文件
初次接触你可能会觉得，它们像小强一样到处都有，而且还一直删不完
这两个文件内存储的，正是当前文件夹里所有图片文件的缩略图
那它有那么重要吗？是的，有那么重要
它是所有的文件管理器、看图软件和手机相册 APP 必备的东西
如果用文件管理器打开一个，保存了很多照片的文件夹或者在手机上打开一个相册
如果它们称职的话，应该直接显示出每张图片的内容
以方便你从茫茫图海中，找到你想要的那一张
而一下子显示几百张照片这件事，可不是闹着玩的
假设一张照片 5 M，解码后为 100 M。200 张照片，总共就是 20 G
你的内存吃得消吗？即使你是土豪，内存吃的消
那读取和解码也要花上几十秒的时间，这你愿意吗？
因此最实际的做法就是，挨个读取每个图片文件
然后生成一个分辨率约为 200x200 的，文件大小约为 10kB 的缩略图
然后把这些缩略图显示在列表中，只有当用户点击
想要放大查看某张图片时，才去加载这张图片的原图
而且生成缩略图的操作，在你不删 Thumb.db 文件的情况下，只需要执行一次
16 AVIF/HEIF - 极限压缩率
打包行李的时候我们知道，如果我们看到行李箱满了，它其实并不是真的满了
因为如果我们再花一点时间，将里面的物品整理一下，就又可以再装好多东西
图片压缩也是这个道理，你如果原意多花一点时间 ，你的图片就可以压缩的更小
AVIF 与 HEIF 这两种图片格式，是目前图片压缩率的天花板
与 WebP 相较 JPG 可以减小 1/3 相比，它们可以做到比 JPG 减小 1/2
与其他图片格式不同的一点是，它们都是视频压缩的副产物
也就是用压缩视频的技术帮你压一帧
AVIF 基于免费的视频编码 AV1
HEIF 基于视频编码 H.265/HEVC，但这个格式是收费的
Windows 应用商店里的HEVC 视频扩展收费 7 元，但我猜微软只是代收费和替挨骂
可以把 JPG 再压缩到一半，好像很厉害啊
但这只是它们光鲜的一面，因为这两种格式在没有硬编码器的时候，速度非常感人
正如小节开头所说的，想在行李箱里装更多东西是需要时间代价的
我找了一张 4k 分辨率的高清壁纸，用 http://Paint.NET 保存为 AVIF 格式进行测试
保存设置里的速度需要切换为中等
因为默认快速的压缩率与 JPG 和 PNG 不差多少
测试发现，保存（编码）需要花费 10 几秒钟，打开（解码）也需要两 2、3 秒钟
用浏览器打开一张图片，算上下载时间估计都不用这么久
人生苦短，为什么要把时间花在这里
17 HDR
月亮的亮度平均为太阳亮度的 1/500000
我们感知不到这么大的区别，是因为人眼有全自动的光圈调节功能：瞳孔
在先前所讲的 已有图像颜色表示 RGB 中
最低亮度为 (R=1,G=1,B=1)，最高亮度为 (R=255,G=255,B=255)
两者只有 200 多倍的差别，这与真实自然场景相差甚远
因此我们的瞳孔在面对一般显示器时，基本上处于停用状态
这也就是说，即使你的显示器分辨率再高，刷新率再高
色深再高，色域再广
如果无法在画面亮度上拉大差距，你无聊的瞳孔就会在你背后
悄悄地对你的潜意识说：“哥们，这不是真的”
显示器厂商早就知道了这一点，它们的办法也挺简单
让 LCD 的背光面板或者 LED 的小灯，再亮一点就可以了
普通显示器的亮度为 300 尼特左右 - nits or cd/m²
如果厂商将这个指标大幅提高，那么就有了让画面上很亮的物体
看起来真的很亮的可能
这种技术叫做 HDR，高动态范围 High Dynamic Range
它主要是针对显示器和内容的一个特性
内容包括我们今天主题范围内的 HDR 图片和主题外的 HDR 游戏和 HDR 视频
有了 HDR，那原有的不支持 HDR 的显示器和内容
就多了一个标签“SDR 标准动态范围”
最早支持 HDR 的 3A 游戏有刺客信条：起源和远哭 5
HDR 视频则大量存在于 YouTube 上
你必须同时有支持 HDR 的显示器和支持 HDR 的内容
并在显示器设置和系统设置中打开 HDR，才能体验到这种技术
还有一点我想说的是 XDR，苹果故弄玄虚，没有对它进行解释
这就导致网上产生了大量对这个词的千奇百怪的解释
那我也凑个热闹，给出一个我的解释
我的解释就是：XDR 不是像 HDR 一样的技术，也不是像 HDR10 和 DisplayHDR
一样的 HDR 标准，而是像 Retina 一样的自造概念
全名应该是 eXtreme Dynamic Range
回到 HDR 图片，与透明度信息使用一个额外的 Alpha 通道类似
只需要再给 HDR 一个额外的通道就可以了
这个通道名不像透明度 Alpha 一样统一
大多数人使用的 HDR 通道名称，叫做“Specular 高光”通道
但它不能再像 RGBA 一样只用 8 位，也就是 0-255 来存储了
因为它涵盖不了 1 - 50,0000 那么大的数字范围，所以它一般用 16 位 或 32 位的浮点数来存储
非程序员不了解浮点数，其实就是把这些二进制位数分成三份
然后分别保存科学计数法的符号部分、小数部分和幂部分
由于旧有的图片格式，一般都不支持自定义通道
因此必须另起炉灶，再新发明一些图片格式，目前较为常见的 HDR 图片格式为
工业光魔开发的 OpenEXR 扩展名为 .exr ，和微软开发的 JPEG XR 扩展名为 .jxr
由于多出来的一个通道 直接就是 32 位
所以 HDR 图片的体积一般会比，同尺寸的普通图片大出一到两倍
18 JXL - 未来之王
JXL 也是一种图片文件格式
它作为本视频上篇的压轴出场，而且被我授予了未来之王这个头衔
那我为什么这么看重它呢？
JXL 格式诞生于 2021 年
目前还没有受到任何一种网页浏览器，和系统自带看图软件的支持
只有个别第三方看图软件和图像编辑器对其进行了支持
所以它目前的实用性极低，但我在这里进行一个大胆的预测
它会在 2023 年逐渐进入人们的视野，并在 2027 年代替 JPG、PNG、GIF
和 WebP 成为通用图片格式的主流
你可以现在点个关注，然后届时回来打我的脸
JXL 是图片格式 JPEG XL 的文件扩展名
从其名称可以知道，它不是 JPEG 的下一代，而是下下代
因为 JPEG 的下一代 JPEG 2000，成功地没有完成代替 JPEG 的任务【Mission Failed】
JXL 支持目前已经说到的全部特性，唯一的缺点是，它的压缩率比 AVIF 和 HEIF 略低
但编码和解码速度就比它们要快多了
而且它有意设计为不需要硬编解码器，硬编解码器是 CPU/GPU/SoC 上的几亿个晶体管
这都是白花花的银子
当你了解到压缩率和编解码速度，是一种权衡之后
JXL 略低的压缩率其实就不是缺点了
（未完待续）