图片占位 · 从一块主色到一团模糊预览

懒加载时先铺一块「主色背景」、给封面配一套主题色、统计一张图的代表色——背后都是同一个问题:从几万种颜色里选出 K 种代表色 (color quantization), 再挑像素最多的那一个当主导色 (dominant color)。

本系列先用 octree (八叉树) 把 24-bit RGB 颜色空间逐位细分、边建边 reduce 折叠相近色, 取出调色板与主导色, 并与 median-cut / k-means 对照;再往上走一档, 看「一块主色」如何升级成 CSS-LQIP / BlurHash / ThumbHash 这类「一团模糊预览」的占位编码。

octree · 量化与主导色

八叉树取主导色 · color quantization

把 (r,g,b) 各 8 bit 看成一条 8 层下降路径，相近的颜色自然落进同一棵子树；叶子太多时自底向上 reduce 折叠最细的分支，直到只剩 K 个叶子 = 调色板，像素最多的那个 = 主导色。逐位看孩子下标怎么拼、单步看建树与折叠，再对同一张图同一个 K 跑 octree / median-cut / k-means 对比代表色与重绘差异（可上传自己的图）。

placeholder · CSS-LQIP / BlurHash / ThumbHash

占位图 hash: 把一张图压成一小串

懒加载占位除了「一块主导色」，还能把整张图的低频轮廓压进一小串数据。CSS-only LQIP（一个 20-bit 整数 + 纯 CSS 解码）、BlurHash（DCT 低频 + base83 串）、ThumbHash（更紧凑、带 alpha）是同一思路的不同精度——其常数项 (DC) 正是「一块主色」。同一张图看三串数据与各自解码出的占位图，并模拟一次懒加载淡入。

一条主线

四种占位是同一条思路的不同精度: 主色 (DC 项) → 加几个低频项就是 CSS-LQIP / BlurHash / ThumbHash。octree 的优势是「建树 O(像素数)、内存有上界、可流式」, 适合浏览器里实时给图片取最稳的那块主色;对画质有极致要求才上 median-cut / k-means。

延伸阅读

• Dominant Colors for Lazy Loading Images manu.ninja 用八叉树为懒加载图片生成主色占位的完整讲解与实现, 本系列的直接出发点。
• color-thief github.com 最流行的「从图片取调色板」库 (浏览器 / Node), 实际用的是 modified median cut (MMCQ), 可与八叉树对照。
• Color quantization wikipedia.org octree / median-cut / k-means 等量化方法的综述与历史 (Gervautz–Purgathofer 八叉树法即出于此)。
• CSS-only LQIP leanrada.com 把图压成一个 20-bit 整数塞进 CSS 变量、渲染期纯 CSS 解码(零 JS)的 LQIP 方案, placeholder 页的来源。