移动端电商首页“秒开”需精准匹配设备能力与视口：首屏图禁用lazy、强制src加载并preload；Picture按DPR+宽度分层source，WebP优先且type严格匹配；宽高内联+aspect-ratio防抖动；sizes须对应真实CSS布局。
移动端电商首页要“秒开”，Picture 标签不是万能钥匙，但用对了，能直接压掉 30%～50% 的首屏图片流量——关键不在堆资源，而在精准匹配设备能力与用户当前视口。下面说清楚怎么落地。
优先加载首屏图，禁用 lazy
首页 Banner、主推商品图、搜索框图标这些首屏关键图，绝对不能加 loading="lazy"。Chrome 预加载器遇到 lazy 属性会跳过它们，等滚动或 JS 触发才开始请求，首屏就卡住。
- 首屏所有
或
内的 必须带真实 src（或 srcset），且不设 loading 属性
- 配合
<link rel="preload" as="image" href="banner-750.webp">提前发起请求，href 必须是最终加载的真实路径（比如适配 iPhone 14 Pro 的 @3x WebP） - preload 只用在真正影响 LCP 的 1～2 张图上，多了反而抢带宽
按设备宽度 + DPR 分层写 source
别只写 max-width，移动端必须叠加像素比。比如 iPhone 13（DPR=2）在 390px 宽视口下，实际需要的是 780px 宽的图；而安卓中低端机（DPR=1）同宽度只需 390px 图。
<source media="(max-width: 390px)" srcset="hero-mob@1x.jpg 1x, hero-mob@2x.jpg 2x"><source media="(min-width: 391px) and (max-width: 767px)" srcset="hero-tab@1x.jpg 1x, hero-tab@2x.jpg 2x"><source media="(min-width: 768px)" srcset="hero-desk@1x.jpg 1x, hero-desk@2x.jpg 2x, hero-desk@3x.jpg 3x">- 所有 srcset 中只用 x 描述符（不用 w），避免混用导致浏览器忽略整组
WebP 优先 + JPEG 降级，type 必须严格匹配
WebP 比 JPEG 小 30%，但 type 写错，浏览器直接跳过所有 source，只 fallback 到 img —— 这是移动端最常踩的坑。
立即学习“前端免费学习笔记（深入）”；
- WebP 放最上面：
<source type="image/webp" srcset="hero.webp"> - JPEG 紧跟其后：
<source type="image/jpeg" srcset="hero.jpg"> - 服务器返回的 Content-Type 响应头必须是
image/webp（大小写、拼写、空格都不能错） - 用 Chrome Network 面板看请求，如果 status 是 blocked:mime-type，就是 type 和实际文件类型不一致
防布局抖动：宽高内联 + aspect-ratio 备用
图片没加载完时留白，一渲染就“跳”，用户感知就是“卡”。这不是网络慢，是渲染阻塞。
-
标签必须写内联 width 和 height，值按原图比例来（比如 750×300，就写 width="750" style="max-width:90%"）
- 现代写法加 CSS：
img { aspect-ratio: 750 / 300; }，Safari 15.4+ 支持；老版本用 padding-top 技巧兜底 - 千万别只靠 style="width:100%"，这不会预留空间，浏览器根本不知道该占多大位置
sizes 属性必须对应真实 CSS 布局
srcset 告诉浏览器“我有哪些图”，sizes 告诉它“你现在该用哪张”。没 sizes，浏览器默认按 100vw 算，结果手机拉 1920w 大图，浪费带宽还拖慢首屏。
- 假设 Banner 在移动端占满视口：
sizes="(max-width: 767px) 100vw, (min-width: 768px) 50vw" - 如果 Banner 被 CSS 设置为 max-width: 375px，那 sizes 就该写
"(max-width: 767px) 375px" - 用 DevTools → Elements 面板检查 computed width，再反推 sizes 值，别凭感觉写
不复杂但容易忽略
