LQIP必须是原图语义等价的极低分辨率版本，生成需用sharp或ImageMagick缩至15×15像素、quality:95并转base64；HTML中须内联base64且声明width/height属性；切换时须同时监听load与error事件，通过class控制过渡并降级兜底。
低清占位图（LQIP）不是“随便塞张小图就行”，它必须是原图语义等价的极低分辨率版本，否则会误导用户构图预期；直接用 CSS 渐变或 SVG 占位虽稳定，但无法传递主色调与布局线索——真要兼顾体验与可控性，得从生成、嵌入、切换三处卡死细节。
怎么生成真正可用的 LQIP 图片（别用 canvas.toDataURL）
浏览器端用 canvas.toDataURL() 生成的 base64 图片质量不可控，容易超 10KB，失去 LQIP “轻量预判”本意。应优先走服务端或构建时生成：
- 用
sharp（Node.js）：缩到15x15像素内、quality: 95、JPEG 编码，输出 base64 字符串 - 用 ImageMagick（命令行）：
convert photo.jpg -resize 15x15 -quality 95 -encode base64 | tr -d '\n' - 严禁对 PNG 原图做无损缩放再转 JPEG——压缩率崩盘，体积翻倍
HTML 中怎么安全嵌入 LQIP（避免 layout shift 和解析失败）
内联 base64 是最稳妥方式，但必须配合宽高锁定和加载策略，否则 LQIP 渲染后原图替换仍会重排：
- 必须写
width和height属性（非 CSS），例如<img width="800" height="600" src="data:image/jpeg;base64,..."> - 禁用
loading="lazy"与 LQIP 同时使用——部分 Safari 版本下onerror+lazy组合失效 - Android WebView 对过长 base64（>4KB）可能截断，建议控制在
2–3KB内
怎么可靠切换 LQIP 到原图（不闪、不白屏、不循环）
靠纯 CSS opacity 过渡是危险的：加载失败时只留透明空框，用户看不到任何反馈。必须监听事件并显式处理终态：
立即学习“前端免费学习笔记（深入）”；
- 用
load事件触发 class 切换（如img.classList.add('loaded')），CSS 控制opacity: 1和transform: scale(1) - 必须同时监听
error：失败时立即降级为 fallback 图，并加title记录原始src方便调试 - 避免在
onerror里直接改this.src后再触发新load——若 fallback 也挂了，会静默失败；应加守卫判断：if (this.src.indexOf('fallback') === -1) this.src = '/fallback.png';
真正难的不是“让模糊图先出来”，而是确保它和原图在宽高、色彩倾向、关键结构上保持视觉连贯——这要求生成环节严格约束尺寸与压缩参数，而不是把 base64 往 src 里一贴就完事。
