首屏大图不能用<picture>做懒加载，必须显式设loading="eager"并配合<link rel="preload">提前请求；<picture>仅决策源图，真正发起请求的是内部<img>，且srcset与sizes必须同时存在才能正确选图。
首屏大图不能用 <picture> 做懒加载——它本身不控制请求时机，loading 属性只作用于内部 <img>，且首屏图必须抢在渲染前发出请求。
首屏图必须显式设 loading="eager"，禁用任何延迟逻辑
很多人误以为 <picture> 自带“智能加载”，其实它只是个决策容器，真正发起网络请求的是最内层的 <img>。浏览器对 loading 的处理完全取决于这个 <img> 标签，而不是 <source> 或 <picture>。
- 首屏 Banner、Logo、LCP 关键图，
<img>必须写loading="eager"（别依赖默认值，Safari 旧版可能误判为 lazy） - 绝对不要给首屏
<img>加loading="lazy"——哪怕它在<picture>里，也会被跳过预加载，白屏延长 200–600ms - 如果用了
<picture>包裹首屏图，<img>的src必须是真实可加载的 fallback 地址（如 JPEG），不能留空或占位符
sizes 写错会导致首屏拉大图，直接拖慢 LCP
srcset 只告诉浏览器“我有哪些图”，sizes 才告诉它“你当前该用哪张”。没写 sizes，浏览器就按 100vw 猜测宽度，手机上也可能拉下 3840w 的图——体积翻倍，首屏卡顿。
- 查你 CSS 中该图容器的真实渲染宽度：用 DevTools → Elements → Computed → width，看各断点下的值
- 按实际逻辑写
sizes，例如：sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" - 响应式场景下，
srcset和sizes必须同时存在，缺一不可；只写srcset是无效优化
非首屏图才适合 loading="lazy"，但需满足硬性条件
loading="lazy" 对长页面确实有用，但它不是“写了就生效”的开关。浏览器只对满足全部条件的静态 <img> 启用 Intersection Observer 判定，漏掉任一条件就退化为 eager 加载，甚至引发布局抖动（CLS）。
立即学习“前端免费学习笔记（深入）”；
- 必须设置
width和heightHTML 属性（不是 CSS），否则无法预留空间，图片加载后重排 - 父容器不能有
overflow: hidden、transform、contain: paint——这些会干扰滚动检测 - 动态插入的图（如 Vue
v-for、Reactmap()、JS 拼接innerHTML）原生loading="lazy"直接失效 - 验证是否真生效：Network 面板勾选 “Disable cache”，刷新后滚动，看首屏外图片是否初始无请求、滚动后才出现
真正提升首屏体验的不是“省图”，而是“抢图”
长页面的首屏卡顿，往往不是因为图太多，而是关键图没抢到加载队列前面。优化重心不在删减，而在调度。
- 在
<head>里加<link rel="preload" as="image" href="hero.webp" fetchpriority="high">，强制提前触发请求 -
href必须和<img>的src完全一致（含查询参数），否则重复下载 - 首屏图建议用 WebP/AVIF +
decoding="async"，避免解码阻塞主线程 - 骨架占位用纯色背景 + 内联 SVG 占位图（
src="data:image/svg+xml,%3Csvg...%3E"），不发 HTTP 请求
