核心是“适配优先、懒加载兜底”，必须用srcset+sizes实现分辨率精准匹配，仅loading="lazy"会导致小屏下载大图、LCP恶化；首屏图禁用lazy改用preload，非首屏统一加lazy但须避免与JS方案混用引发重复加载。
移动端 H5 页面做响应式图片 + 懒加载，核心不是“先懒再适配”，而是“适配优先、懒加载兜底”——否则容易在小屏下载大图，反而拖慢首屏（LCP），甚至引发卡顿。
关键：响应式图片必须用 srcset + sizes，不能只靠 loading="lazy"
原生 loading="lazy" 只控制“什么时候加载”，不决定“加载哪张图”。如果只写：
<img src="banner-1200.jpg" loading="lazy">
移动端仍会下载 1200px 宽的大图，只是延迟了 2 秒——流量没省，LCP 更差。
正确做法是搭配 srcset 和 sizes，让浏览器按设备宽度、DPR 自动选最合适的尺寸：
-
srcset列出多套资源（如banner-400.jpg 400w, banner-800.jpg 800w, banner-1200.jpg 1200w） -
sizes告诉浏览器“这张图在不同断点下实际占多宽”，必须覆盖全视口范围，例如：sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 300px" - 首屏主图禁用
loading="lazy"，改用<link rel="preload">提前拉取
非首屏图片统一加 loading="lazy"，但要避开 DOM 冲突
现代浏览器（Chrome 76+、Safari 15.4+、Firefox 75+）已原生支持，无需 JS，简单可靠：
<img srcset="p-400.jpg 400w, p-800.jpg 800w" sizes="(max-width: 480px) 100vw, 50vw" src="p-800.jpg" loading="lazy">
⚠️ 注意：不要同时混用 loading="lazy" 和自定义 data-src + IntersectionObserver，否则可能触发两次加载，导致图片丢失或重复请求。
若需兼容旧版 Android WebView 或 iOS 14.5 以下，可降级为纯 JS 方案，但需手动管理 dataset.srcset 避免被浏览器覆盖。
防卡顿的细节补丁
光有懒加载还不够，移动端滚动敏感，还需配合以下措施：
- 所有图片必须声明
width和height（或使用 aspect-ratio CSS），防止布局抖动（CLS） - 为懒加载图片设置占位背景（如 base64 小图或 CSS gradient），避免白块闪现
- 对图片 CDN 域名添加
<link rel="preconnect" href="https://cdn.example.com">，减少 DNS 查询和 TLS 握手耗时 - 静态资源启用强缓存：
图片类设Cache-Control: public, max-age=604800（7 天）
JS/CSS 带哈希版本号，设max-age=2592000（30 天）
验证是否生效的简单方法
在 Chrome DevTools 的 Network 面板中：
- 刷新页面，筛选
Img类型，确认首屏图无 delay，且 size 合理（如 375px 屏加载 ~400w 图） - 滚动页面，观察后续图片是否在进入视口前 100–300px 才发起请求
- 切换到 “Slow 3G” 网络，检查是否仍有大图被误加载（说明
sizes写错或漏断点）
