Handsum推出新型LQIP图像文件格式

背景

在网络应用中，低质量图片占位符（LQIP）是一种用于提升页面加载体验的技术。LQIP 是指文件尺寸和像素尺寸都极小的图片，它们能快速加载，在后台全分辨率图片缓慢加载的同时，为用户提供即时的视觉反馈。由于文件体积足够小，LQIP 可以方便地以 base64 编码内联到网页中，从而减少网络往返次数，加快页面加载速度。

现有的 LQIP 技术包括 Blurhash 和 Thumbhash 这两种自定义图片格式，以及直接使用低质量 JPEG 或 WebP 并配合很小的像素尺寸。这篇博客文章介绍了 Handsum，另一种自定义 LQIP 图片格式。

核心内容

Handsum 是一种专门为缩略图设计的 LQIP 图片格式，其文件体积是固定的：最低质量设置为 48 字节，最高质量设置为 147 字节。对于桌面端、原生或命令行应用，如果将缩略图存储在数据库中，这种固定大小特性允许使用定长列，这可以加快迭代速度并简化实现。

Handsum 基于离散余弦变换（DCT），该变换也被 Blurhash、Thumbhash 和 JPEG 本身使用。理解相对简单的 Handsum 格式的工作原理，有助于理解相对复杂的 JPEG 格式（JPEG 规范是一份 186 页的 PDF 文件，而 Handsum 要简单得多）。

博客中展示了一个 Handsum 网页演示的带注释截图，它使用 C 语言编写的 Handsum 解码器，并编译为 Wasm 运行。此外，还给出了 Handsum 与 PNG、Thumbhash（与 Blurhash 非常相似）、WebP、ETC2 和 JPEG 的对比结果。

对比表格说明：

• 每一行对应一张维基百科上的著名图片：earthrise、la-grande-jatte、lincoln、mona-lisa、parliament、pearl-earring、starry-night、tsunami、van-eyck、water-lillies。
• 第一列“Original”是原图，缩放至 32×32 像素的边界框内（保持宽高比）。例如，500×745 像素的蒙娜丽莎被缩放到 21×32 像素。
• 其他每一列都是经过某种有损编码再解码后的结果（round tripping）。单元格上方的数字（如 1368 或 615）是编码后的字节数。字节数越大，质量通常越高。问题在于，在保持可接受质量的前提下，能压缩到多小（以字节为单位）。

各列含义：

• PNG 16：将图片缩放到 16×16 像素边界框内，以无损 PNG 编码。解码后得到 16×16 内的图片（例如蒙娜丽莎为 11×16），然后使用双线性滤波器上采样回 32 像素宽或高。
• Thumbhash：使用 Thumbhash LQIP 编解码器，产生极小的编码，仅 24–27 字节。
• Handsum（四列）：对应 Handsum 的四个质量等级。单元格中的“Hsum 16 q=1”表示编解码器本身产生的图片适合 16×16 边界框，因此上采样到 32 以与其他单元格比较。
• WebP Lossy（基于 VP8）：质量分别为 0、25、75。“WebP 16”列编码/解码 16×16 内图片并上采样；“WebP 32”列编码 32×32 内图片，解码后无需上采样。
• ETC2：封装在 PKM/PACKMAN 容器中，是 OpenGL ES 3.0 强制要求的纹理压缩格式（与 BCn/DXTn/S3TC 类似）。ETC2 设计用于 GPU 并行解码，但也可在 CPU 上解码。“16”表示编码低分辨率源图并上采样，“32”表示编码高分辨率源图。
• JPEG：质量 75，与 WebP 的“质量=75”大致可比但不完全相同。同样有“16”和“32”之分。

Handsum 各质量等级的比较：

• 在 q=1（最低质量）时，Handsum 大致相当于一个稍大（字节数稍高但质量更好）的 Thumbhash。绝对差异仅约 24 字节。所谓“更好视觉质量”是指，如果让观者根据缩略图猜测原图，对于蒙娜丽莎或戴珍珠耳环的少女，Handsum (q=1) 的缩略图尚可辨认，而 Thumbhash 则难以置信。但仍优于 WebP 16 q=0 产生的“现代土豆艺术”。
• 在 q=4（最高质量）时，在给定的字节预算下，Handsum 大致相当于 WebP Lossy (VP8) 和 ETC2。但一个区别是：在给定质量设置（及 c=3，见下文）下，所有 Handsum 文件字节数相同：q=1 始终 48 字节，q=2 为 75，q=3 为 123，q=4 为 147。

应用场景：例如开发一个展示艺术品目录（油画、录音等）的嵌入式应用，可为每个条目预算 256 字节。分配给艺术家名和作品名各 50 字节（必要时截断），再加一些元数据（时间戳、曲目长度等），剩余约 150 字节用于缩略图。如果使用 WebP 编码 16×16 缩略图，q=75 大多时候能压缩到 150 字节以内，但并非总是如此。WebP 编码器通常有质量设置，但没有字节预算设置，因此生成足够小的 WebP 需要反复调整。而使用 Handsum q=4，每次都能保证得到 147 字节。

Handsum 的颜色设置：c=1 表示灰度，c=3 表示 RGB（等价于 YCbCr），c=4 增加 Alpha 通道。博客主要讨论 c=3，参考实现中的代码注释有 c=1 和 c=4 的更多细节。

编码过程（以 q=4 为例）：

对于任何源图片（如 500×745 像素的蒙娜丽莎），编码算法将其压缩为 144 字节的像素数据，加上 3 字节头部（15 位魔数签名、2 位颜色、2 位质量、5 位宽高比），总共 147 字节。

Handsum 编码可分解为多个阶段，解码则是反向执行这些阶段，再加上一个后处理“环路滤波”阶段。解码到“阶段 0（缩放）”时并非完全反转：解码