Shopify 图片 srcset 断点没覆盖高分屏怎么改

现象#

商品页主图在 iPhone 上仍下载 1600px 版本，Network 里 Transfer Size 412KB，Lighthouse 报 Properly size images 可省 300KB。

原因#

• image_url 只传了宽度上限，image_tag 生成的默认 srcset 最大只到该宽度，超过的候选不会再补
• 没写 sizes，浏览器按 100vw 计算所需像素，直接挑最大的那个候选
• 主题自定义了 widths: '200,300,400'，与实际渲染宽度的比例完全对不上
• 图片被 CSS 的 object-fit 拉伸到容器宽度，Liquid 侧仍按旧尺寸输出

处理步骤#

1. 打开商品页 Network 面板按 Img 过滤，记录每张图的 ?width= 实际值与体积
2. 把固定 width 改成断点列表：image_tag: widths: '360,720,1080,1600'
3. 用容器真实宽度反推 sizes，主图区常见 45vw 与 92vw 两档
4. 确认输出的 <img> 同时带 width 与 height，换图时不产生位移
5. 在 PageSpeed 里重跑 Properly size images，看估算节省量是否归零

验收标准#

移动端实际下载的 ?width= 落在 750 附近而非 1600；该项审计的预估节省降到 30KB 以内。