IMAGE & MEDIA
模糊占位加载Blur-up Loading
先显示一张 20px 的模糊缩略图，真图加载完淡入接替——Medium 的经典手法。
效果预览
从模糊中显影 · 零布局跳动
适合用在哪
图片密集的页面（博客、画廊、电商列表）、慢网络优化。
容易踩的坑
- 首屏 LCP 图片也加 loading=lazy，浏览器延迟请求反而拖慢 LCP。
- 占位图没有 aspect-ratio 或宽高属性，真图加载后布局跳动、CLS 升高。
- 内联 base64 占位图超过 1KB，几十张累计让 HTML 体积膨胀。
设计提示词 · Prompt
模糊占位加载（Blur-up / LQIP）：构建时为每张图生成 10-20px 宽的微缩图（base64 内联进 HTML，几百字节），先以 filter:blur(20-30px) + scale(1.1) 显示占满容器；真实图片 onload 后 opacity 0→1 交叉淡入（400ms），然后移除 blur 层。观感是"图从模糊中显影"。原生方案：img 的 loading="lazy" + decoding="async" 是基线，LQIP 是体验升级。配合 aspect-ratio 占位防布局跳动（CLS=0）。Next/Image、Unsplash 等平台已内置。
Blur-up / LQIP: At build time, generate a 10-20px-wide micro thumbnail for each image (base64 inlined into the HTML, a few hundred bytes), first displayed with filter:blur(20-30px) + scale(1.1) filling the container; after the real image's onload, cross-fade opacity 0→1 (400ms), then remove the blur layer. It feels like "the image developing out of the blur." Native approach: loading="lazy" + decoding="async" on img is the baseline; LQIP is the experience upgrade. Pair with aspect-ratio placeholders to prevent layout shift (CLS=0). Next/Image, Unsplash and similar platforms have this built in.
常见搭配
同一页面里经常和「模糊占位加载」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-blurup"> <div class="d-blurup__blur"></div> <div class="d-blurup__img"></div> <span class="d-blurup__tag">从模糊中显影 · 零布局跳动</span> </div>