本身不解决白块，关键在于配合srcset、sizes、宽高或aspect-ratio约束、media预选、loading="lazy"及svg占位等综合策略。
picture 标签本身不解决白块，关键在配合 srcset 和 sizes
直接用 <picture></picture> 不会自动减少白块。白块本质是图片加载慢 + 渲染阻塞，而 <picture></picture> 只是提供多源选择逻辑，真正起效的是它包裹的 <source></source> 与 <img> 如何配置响应式资源和占位策略。
必须给内部的 img 设置 width/height 或 aspect-ratio
没有尺寸信息时，浏览器无法预留布局空间，图片加载前区域塌陷 → 视觉跳动或白块。即使用了 <picture></picture>，如果内部 <img> 缺少尺寸约束，仍会触发重排+白块。
- 推荐写法：
<img src="small.jpg" style="max-width:90%" style="max-width:90%" alt="">（保持宽高比） - 或现代写法：
<img src="small.jpg" style="max-width:90%" alt=""> - 避免只写
width="100%"且无父容器高度限制 —— 这会导致高度为 0，白块更明显
用 media 属性做视口级预选，而非等 JS 运行后才加载
<source></source> 的 media 属性由浏览器原生解析，在 HTML 解析阶段就决定用哪条资源，比 JS 懒加载更早介入，能缩短首图“空白等待窗口”。
- 示例：
<source media="(max-width: 768px)" srcset="mobile.jpg"></source>—— 平板以下设备不会下载 desktop.jpg - 注意：media 判断基于当前视口，不是设备像素比；若需 DPR 感知，必须用
srcset+x描述符，如srcset="logo@2x.jpg 2x" - 不要把所有分辨率都堆进一个
srcset，尤其大图（如 4K banner），应配合media切断非目标场景的下载
白块缓解的真正组合：picture + loading="lazy" + 占位 SVG
单靠 <picture></picture> 不够，要叠加三层控制：
-
loading="lazy"：对非首屏<img>延迟到滚动进入可视区再发起请求（<picture></picture>内部的<img>支持该属性） - 内联 SVG 占位：
<img src="data:image/svg+xml,%3Csvg..."> 替代空 <code>src或透明 GIF，避免初始 layout shift - 避免 fallback 图片过大：
<source></source>的srcset应包含一张轻量 fallback（如 30KB WebP），而不是直接 fallback 到原图
最易被忽略的一点：即使用了 <picture></picture>，如果服务器未开启 HTTP/2 多路复用，或 CDN 未缓存各尺寸变体，media 选中的那张图仍可能因网络排队延迟加载 —— 白块只是从“全页面”挪到了“单图”，并未消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
