默认占位需兼顾布局稳定、无额外请求和用户可理解，推荐CSS渐变+aspect-ratio组合方案：background: linear-gradient(#eee,#eee)、background-size匹配图片尺寸、background-repeat:no-repeat、background-origin:content-box，并配合<picture>中真实src兜底、alt准确描述、懒加载时使用真实小图占位及防抖动处理。
默认占位不是加个灰色方块就完事，关键在“加载失败时还能撑住布局、不触发额外请求、且用户看得懂这是图”。
用 CSS 渐变做无图占位最稳
纯 CSS 方案不依赖网络、不增加 HTTP 请求，还能精准控制尺寸和视觉反馈。它比 base64 占位图兼容性更好，也比第三方服务（如 placeholder.com）更可靠。
-
background: linear-gradient(#eee, #eee)必须写两个相同颜色，IE9+ 和旧 Android WebView 才能正常渲染 -
background-size: 320px 240px要和目标图宽高一致，否则拉伸或裁剪 - 一定要加
background-repeat: no-repeat，否则会平铺满整个容器 - 若父容器有
padding，用background-origin: content-box确保渐变从内容区左上角起始
<picture> 里 <img> 的 src 就是默认占位
很多人以为 <picture> 只管格式降级，其实它的末尾 <img> 是最终兜底载体——它的 src 就是默认占位图地址，必须指向一个真实可访问的资源。
- 不要写
<img src="">或<img src="broken.jpg">，否则所有<source>失败后页面只剩alt文本 - 推荐用 CDN 托管的小尺寸 PNG 占位图，比如
/assets/placeholder-320x240.png，大小控制在 1–2KB -
<img>的alt仍需准确描述内容，不能空着，否则无障碍和 SEO 都失效
懒加载场景下占位符必须是真实小图
只靠 loading="lazy" 或 JS 控制加载，不代表可以省略占位逻辑。空白 src 或 base64 在部分 Android WebView 中会解析失败，导致容器塌陷。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 结构必须是：
<img src="placeholder.png" class="lazy"> -
placeholder.png必须真实存在、尺寸匹配、支持透明；别用data:image/png;base64,...当首屏占位 - JS 加载成功后，要显式替换
src并移除lazy类，否则IntersectionObserver可能重复触发 - 如果用
onerror做 fallback，得防循环：onerror="if (this.src !== '/fallback.png') this.src = '/fallback.png';"
aspect-ratio + 占位才是防抖动核心
图片没加载前盒模型缺失，文字上推重排（CLS）问题，从来不是靠“等图加载完再显示”能解决的——必须提前预留空间。
- 优先用
aspect-ratio: 16/9+width: 100%，现代浏览器原生支持，响应式缩放稳定 - Safari 15.3 及更早版本需回退：
height: 0; padding-bottom: 56.25%; position: relative;，子元素position: absolute填充 - 禁用
min-height或max-width替代——它们不参与初始布局计算，无法阻止塌陷 - CSS 渐变占位 +
aspect-ratio组合，才是真正“看不见图也不跳”的方案
真正麻烦的从来不是“怎么放一个灰色方块”，而是当图片尺寸动态变、CDN 挂了、路径拼错、或者用户开着省流量模式时，你的占位是否还撑得住布局、是否还在加载、是否让用户意识到“这里本该有图”。
