网页创作者和设计师经常遇到一桩怪事：在自己的专业超广色域显示器上画出的极为柔各、顺滑精美的暗色渐变海报，导出传给路人或放到普通设备展示时，竟然出现了一条条像“斑马线”一样生硬难看的色彩横杠断层。这种极度尴尬的情况正是由图片色彩位深（Color Bit Depth）限制引起的。

什么是色彩位数的硬件内幕？

数字化影像世界中，每一个显示像素都是由红(R)、绿(G)、蓝(B)三种基色合成的。所谓色深，指的就是每一个基色通道能够记录多少个亮暗变化等级：

1. 8-Bit / 8位色深 (现役最普通的互联网通用标准)

  • 数学逻辑: $2^8 = 256$。即红色通道、绿色通道、蓝色通道各有 256 个亮度档位。
  • 红绿蓝交叉相乘: $256 \times 256 \times 256 \approx \mathbf{1677 万种色彩}$。
  • 断层根源: 1670万色听起来很庞大对不对？但是在 1920 像素宽的手机大屏上，想要画一条极其柔和、从纯黑色慢慢过渡到深灰色的壁纸渐变时，你手中其实总共只有这 256 个色档坐标可以画。于是在相邻的两档渐变像素间，就会产生人眼可察觉的断阶。

2. 10-Bit / 10位色深 (高端影音设备与HDR影视标准)

  • 数学逻辑: $2^{10} = 1024$ 种亮度台阶。
  • 红绿蓝交叉相乘: $1024 \times 1024 \times 1024 \approx \mathbf{10.7 亿种色彩}$。
  • 效果: 相比8位，色彩过渡的平稳程度直接暴涨 64 倍！渐变层顺滑得像绸子一样，绝无条纹。

3. 16-Bit / 16位色深 (摄影工业级底片RAW格式)

  • 数学逻辑: $2^{16} = 65,536$ 个精度的亮度变化，多由数码单反拍摄时直接产生。能容许后期工作者超高强度任意调整曝光，而免遭画质撕裂。

修复网页大图色彩断层的高级诀窍：色彩抖动 (Dithering)

既然为了让网站秒开我们必须继续保存小体积的 8-bit 透明图或 JPG。那要如何不让高频的斑马线条纹出来扫兴呢？ 答案就是：抖动噪点算法。在设计软件或格式压缩导出时开启 Dithering 指令，这会在那些色彩台阶转换处人为掺入一点点肉眼近乎微不可察的、杂乱错落的微弱杂色微粒，打破原来整齐的长条形边界，我们的视网膜就会自动把它们融合并认为这是无极平滑的。