Shopify 商品图按 2048px 原图输出拖慢移动端

现象#

集合页每张商品卡都是 ?width=2048，移动端首屏 8 张图共 2.4MB，LCP 5.4s，评分只有 21。

原因#

• 主题在 image_url 里写死 width: 2048，当作高清保险，实际卡片容器只有 400px
• 商家上传保留 2048×2048 方图，CDN 不会替商家推断页面上的展示尺寸
• 集合页沿用默认 srcset，最大候选仍跟随写死的 2048 上限，断点全部偏大
• 原图是设计稿导出的 PNG，同样尺寸下体积是同画质 JPEG 的三到五倍

处理步骤#

1. 在 Network 里按 Size 排序，确认体积最大的几张是否都带 ?width=2048
2. 卡片图改成 image_url: width: 600，srcset 断点给 165,330,535,600
3. 商品主图给 width: 1600 上限，容器再宽也不再往上加
4. 后台把超尺寸原图按长边 2048 重新导出为 JPEG，质量设 80 后替换
5. 复跑 PageSpeed，对照 Properly size images 与页面总字节数两项

验收标准#

集合页移动端图片总传输低于 900KB，单张卡片图的 ?width= 不超过 600。