Shopify 移动端隐藏的大图仍在后台下载

现象#

移动端首屏只显示一张小图，Network 里仍有 3 张 1600px 桌面图在传输，合计 720KB，LCP 被拖到 4.2s。

原因#

• display: none 只影响绘制，<img src> 依旧会被请求
• 主题用同一段 Liquid 输出桌面与移动两张图，靠媒体查询隐藏其中一张
• <picture> 里 source 顺序或 media 写反，浏览器仍回落到 img 的 src
• 图片写在 CSS 的 background-image 里，媒体查询不命中时也会加载

处理步骤#

1. 在移动端模拟下按 Img 过滤 Network，确认被隐藏的图是否仍有请求
2. 改用 <picture>，<source media="(min-width:750px)"> 放在 img 前
3. 或者直接用 image_tag 的 widths 加 sizes，让浏览器按实际渲染宽度选一张
4. 必须双图时给移动端图加 loading="lazy"，桌面图保留 fetchpriority="high"
5. 用 WebPageTest 的移动端跑一次，核对请求列表里没有桌面大图

验收标准#

移动端每个图片位只剩 1 条请求，图片总字节下降 50% 以上，LCP 回到 2.5s 以内。