10天前
|
|
|
111
原文介绍了一种仅使用 CSS 实现模糊图像占位符（LQIPs）的技术，无需复杂的标记，只需一个自定义属性。文章探讨了 LQIP 的多种实现方法，包括低分辨率 WebP 或 JPEG、优化的 SVG 形状占位符（SQIP）以及直接应用离散余弦变换（BlurHash）。
## LQIP 方法概览
现有的 LQIP 实现方案多种多样，各有优缺点：
* **低分辨率图像：** 使用极低分辨率的 WebP 或 JPEG 作为占位符，但效果可能不佳。
* **SVG 形状占位符（SQIP）：** 通过优化的 SVG 形状来近似图像，但实现较为复杂。
* **离散余弦变换（BlurHash）：** 将图像数据压缩成短字符串，但需要 JavaScript 进行解码和渲染。
* **纯色占位符：** 使用图像的平均颜色填充，简单但缺乏细节。
* **渐变占位符：** 使用线性渐变来粗略地近似图像，但需要在标记中添加冗长的内联样式。
## CSS-only BlobHash 的实现
本文提出了一种新的 CSS-only LQIP 方法，称为 BlobHash。该方法将图像数据编码为一个整数，并使用 CSS 自定义属性 `--lqip` 传递该整数。
### 编码方案
BlobHash 使用 20 位信息来编码图像：
* **8 位：** 用于编码 Oklab 颜色空间的基色（2 位用于亮度，3 位用于 a 和 b 坐标）。
* **12 位：** 用于编码 3×2 网格上的 6 个亮度分量（每个分量 2 位）。
### 解码与渲染
CSS 代码使用位移和位掩码操作来解码整数，并将解码后的值转换为 CSS 颜色。然后，使用多个径向渐变来渲染灰度分量，并在底部添加纯色基色。
## 优化径向渐变
为了使径向渐变无缝衔接，文章使用了“二次缓动”来控制不透明度的渐变，模拟双线性插值的平滑效果。
## 总结与分析
CSS-only BlobHash 方法具有以下优点：
* **极简：** 只需一个自定义属性，无需复杂的标记或 JavaScript。
* **纯 CSS：** 完全依赖 CSS 实现，无需额外的依赖。
* **可定制：** 可以通过调整编码方案来优化图像质量和压缩率。
然而，该方法也存在一些局限性：
* **图像质量有限：** 由于只使用了 20 位信息，LQIP 图像的细节有限。
* **浏览器兼容性：** 依赖于 CSS 自定义属性和径向渐变，可能在旧版本浏览器上存在兼容性问题。
* **编码复杂性：** 需要离线脚本来将图像编码为整数。
总的来说，CSS-only BlobHash 是一种有趣且实用的 LQIP 实现方法，特别适用于对标记简洁性和性能有较高要求的场景。虽然图像质量有限，但其极简性和纯 CSS 实现使其成为一种有吸引力的选择。
