Shopify image_url 加 width 参数后图片反而变模糊

现象#

为了优化加载速度给 image_url: width: 600，结果在高分屏上图片明显发虚，换成 master 又太大。

原因#

• 只输出了一个固定宽度的 URL，没有配 srcset，高分屏拿到的仍是 600px 位图
• 原图本身小于请求宽度，Shopify 不会放大，返回的还是小图
• 裁剪参数 crop 与 width/height 同时使用导致构图被裁掉一部分
• 用了 img_url 老过滤器，参数写法与新版 image_url 不同

处理步骤#

1. 改用 image_url 并生成多档：{{ image | image_url: width: 1200 }} 配合 image | image_url: width: 600 2x
2. 用 image_tag 直接输出，它会自动带 srcset 与 sizes：{{ image | image_tag: loading: 'lazy', sizes: '(min-width: 750px) 50vw, 100vw' }}
3. 先确认原图分辨率：后台文件详情里的原始尺寸必须不小于最大展示宽度的 2 倍
4. 需要固定比例时用 crop: 'center'，并在 CSS 里给容器设 aspect-ratio 防止抖动

验收标准#

DevTools 里图片 currentSrc 在 1x/2x 设备下分别命中不同档位，视觉上不再发虚，Lighthouse 不再提示图片尺寸不足。