Shopify 图片能不能自动转 WebP 或 AVIF

现象#

商品图都是 JPG/PNG，单张 300KB 以上，想让 Shopify CDN 自动输出更小格式。

原因#

• 直接用了原图 URL，没有走 image_url 参数
• CDN 会根据浏览器 Accept 头返回现代格式，但需要正确的参数与 srcset
• 上传的源图本身压缩过度或尺寸过大

处理步骤#

1. 统一用 {{ image | image_url: width: 800 }}，Shopify CDN 会自动协商 WebP/AVIF
2. 配合 image_tag 输出 srcset，让不同 DPR 拿不同尺寸
3. 源图控制在 2048px 长边、质量 80 左右再上传
4. 用 DevTools 的 Content-Type 确认实际返回格式

验收标准#

图片响应 Content-Type 为 image/webp 或 image/avif，单图体积下降 40% 以上，视觉无明显损失。