#优质博文 #前端 #css #LQIP #oklab
好聪明的纯 css LQIP 解决方式
Minimal CSS-only blurry image placeholders

AI 摘要：本文详细阐述了一种创新的 CSS 技术，通过单个自定义属性（如 --lqip:192900）实现低质量图像占位符（LQIP），无需额外标记或 JavaScript。作者对比了现有 LQIP 方案（如 BlurHash、Gradify 等），指出其依赖复杂标记或脚本的缺点。核心方案是将图像信息压缩为 20 位整数，通过 CSS 解码并渲染为 3×2 网格的径向渐变叠加，模拟模糊效果。文章还探讨了 CSS 数值限制、位操作实现、颜色空间选择（Oklab），以及通过二次插值优化渐变平滑度。最后提供了替代方案（如单色填充）和未来 HTML 属性 attr() 的展望。

1. CSS-only模糊图像占位符（LQIP）技术

• 方法：通过单一CSS自定义属性（--lqip）实现模糊占位符，无需额外标记或JavaScript。

<img src="…" style="--lqip:192900">

• 优势：
• 极简：仅需一个整数属性，不污染HTML结构。
• 非侵入性：无需包装元素、长数据字符串或复杂脚本。
• 即时渲染：纯CSS方案在加载时立即显示。

2. 与其他LQIP方案的对比
• 传统方案：
• 低分辨率图片（如WebP/JPEG）、SVG形状优化（SQIP）、BlurHash（需JS解码）。
• 纯色/渐变占位符：如Canva/Pinterest的纯色填充，或Gradify的CSS渐变近似。
• 缺点：
• 其他CSS方案常需冗长内联样式或数据URL，增加标记复杂度。
• BlurHash需JS解码，牺牲了纯CSS的即时性。

3. CSS整数编码与解码
• 编码限制：
• CSS整数值范围受限（-999,999至999,999），有效信息量约20位（2^20种配置）。
• 编码方案：
• 基础颜色（8位）：使用Oklab色彩空间（2位亮度+3位a/b坐标）。
• 6个灰度组件（12位）：3×2网格布局，每个组件2位。
• 解码技术：
• 通过CSS的calc()、mod()和round(down)模拟位操作（移位和掩码）。

--bits: mod(round(down, calc(var(--packed-int) / 64)), 4);


4. 渲染实现
• 径向渐变网格：
• 6个径向渐变覆盖3×2网格，叠加基础颜色。
• 使用二次缓动模拟双线性插值，避免硬边，实现平滑模糊效果。

background-image:
radial-gradient(50% 75% at 16.67% 25%, var(--lqip-ca-clr), transparent),
linear-gradient(0deg, var(--lqip-base-clr), var(--lqip-base-clr));


5. 备选方案与未来改进
• 早期尝试：
• 四角色混合（因混色效果差放弃）。
• 单一纯色占位符（简单但缺乏细节）。
• 未来方向：
• 使用HTML属性（如lqip="192900"）替代CSS变量，依赖attr() Level 5规范。

6. 局限性
• 视觉粗糙：相比BlurHash等方案，模糊效果较基础。
• 兼容性：依赖CSS图像的RSS阅读器可能不支持。

author leanrada.com