占位符是真实文件加载前,图片位置上显示的东西。做得好,页面感觉更快、也不会乱跳。

几种技术

  • 主色块 —— 一块纯色。最简单、极小。
  • LQIP(低质量占位图)—— 真实图片的高度模糊微缩版。
  • BlurHash —— 一段紧凑字符串,解码成形似该图的模糊渐变。

为什么值得

预留空间能阻止布局偏移(利于 Core Web Vitals),模糊预览也比空白框体验更好。

和基础搭配

占位符是对基础的补充,而非替代:懒加载、正确的尺寸和压缩文件。