摘要：模糊占位图不是装饰——它是一种伪装成加载效果的 Cumulative Layout Shift 修复方案，因为一个正确设置尺寸的占位图会在真实图像加载完成之前，为图像预留出精确的空间。可搭配 Character Counter、Encoding Converter、Text Difference 和 AI Hidden Characters 一起使用本指南。
LQIP（低质量图像占位符）是真实图像的一个极小、高度压缩的版本——通常是 20×20 像素甚至更小，只有几百字节——在全分辨率文件加载期间以模糊放大的形式显示。
LQIP 真正解决的问题：布局偏移，而非美观
如果没有预留图像最终尺寸的占位图，页面会在没有图像空间的情况下渲染，然后在文件到达的那一刻把下面的所有内容都往下推——Cumulative Layout Shift（CLS），谷歌 Core Web Vitals 之一，会对这种情况产生负面评分。一个相同宽高比的占位图（无论是否模糊）从首次渲染起就占据了正确的空间，因此真实图像加载时什么都不会移动——模糊效果只是在真正的修复之上锦上添花，而真正的修复是预留空间。
一张极小的图像如何被即时嵌入
LQIP 占位图通常作为 Base64 编码的数据 URI 直接嵌入 HTML 中——<img src="data:image/jpeg;base64,...">——因此占位图渲染时不需要额外的网络请求，这一点很重要，因为整个目的就是在真实图像的请求甚至还没有完成之前就先展示点什么。由于源图像极小（编码前通常不到 1KB），base64 带来的开销——比原始字节大约多 33%——对于占位图来说可以忽略不计，尽管这对全尺寸图像来说是种浪费。
LQIP 与纯色主色占位图
模糊的微缩图携带的视觉信息（大致形状、色彩分布）比一个简单的主色矩形要多，但这也意味着更多的配置工作——为每张照片生成并存储一张小图像，而不是计算一个平均颜色。对于图像本身就是重点的、以照片为主的画廊，LQIP 额外的保真度通常是值得的；对于较小的 UI 图像或图标，纯色占位图能以更低的开销完成同样的 CLS 预防工作。
正确添加占位图的工作流程
- 在每个图像标签上设置明确的
width和height（或 CSS 的aspect-ratio）——这才是真正预留空间的做法；占位图本身并不能单独做到这一点。 - 按图像真实的宽高比生成极小的占位图，而不是使用不匹配的固定尺寸——不匹配的比例会在真实图像替换它时产生偏移。
- 将占位图作为 base64 数据 URI 嵌入，实现零请求加载，仅为真正很小的占位图像保留这种做法。
- 使用浏览器的网络限速功能进行测试——占位图的价值只有在真实图像加载缓慢时才会显现出来。
应避免的常见错误
- 添加模糊效果却没有同时设置明确的尺寸——单纯的模糊对布局偏移毫无作用。
- 使用与真实图像宽高比不同的占位图，这在替换时无论如何都会造成偏移。
- 为了"一致性"而用 Base64 嵌入全尺寸图像，白白增加页面体积却没有任何占位图的好处。
- 把 LQIP 纯粹当作一种视觉效果，却没意识到它真正的作用是预留布局空间。
模糊是用户注意到的东西；而其下的尺寸预留才是真正保护你的 Core Web Vitals 分数的东西。