低质占位图（LQIP）是用极小体积图像传递轮廓、主色与构图以降焦虑；须预设宽高比防布局抖动，嵌入2–3KB模糊图并保持比例一致；配合渐进切换、错误回退及语义可访问性保障。
低质占位图（LQIP，Low-Quality Image Placeholder）不是“随便糊弄一下”，而是有策略地用极小体积的图像传递关键视觉线索，让用户在真实图加载前就感知到内容轮廓、主色调和构图方向，从而显著降低等待焦虑、提升感知性能。
预设宽高比，防止布局抖动
浏览器在图片加载完成前若不知道尺寸，就会导致文字上推、卡片错位等CLS问题。必须锁定容器比例：
- 推荐用 CSS
aspect-ratio: 16/9+width: 100%，现代浏览器全覆盖 - 兼容旧版 Safari 可加回退：
height: 0; padding-bottom: 56.25%; position: relative - 避免仅靠
max-width或min-height，它们不参与初始布局计算
嵌入轻量可识别的模糊图
不是越模糊越好，而是要在 2–3KB 内保留足够信息：
- 使用 WebP 格式生成 10–20KB 的超低分辨率图（如 40×22 像素），再高斯模糊并导出为 base64
- 直接作为
background-image写入 CSS，或通过<Image placeholder="blur" blurDataURL="data:image/webp;base64,..." />在 Next.js 中使用 - 模糊图需与原图保持一致的宽高比和主体朝向，否则过渡时会出现“偏移感”
配合渐进式切换与状态反馈
单纯替换 src 不够，要让切换过程自然可信：
- 加载中：显示模糊图 + 轻微 opacity 过渡（如从 0.8 → 1.0）
- 加载成功：用
img.addEventListener('load', ...)触发.loaded类，启用 CSS 动画（如 scale(1.02) → scale(1)） - 加载失败：不能留透明空框，需 fallback 到 SVG 图标 + alt 文本，并设
aria-hidden="true"防止读屏重复播报
语义与可访问性不妥协
低质 ≠ 无意义：
- 所有
<img>必须带有效alt，即使用了模糊图；装饰性图片明确写alt="" - 模糊图本身不替代 alt，它只是视觉辅助，不可访问性逻辑仍由 HTML 层保障
- 若用背景图方式实现占位，真实
<img>应保留loading="eager"或loading="lazy"并监听 load/error 事件
不复杂但容易忽略
