Shopify 性能优化

Shopify 图片 format=webp 参数为什么不生效

现象#

在图片地址后手拼 &format=webp,Network 的 Content-Type 仍是 image/jpeg,单图 380KB 一点没变。

原因#

  • image_url 的 format 只接受 pjpg 与 jpg,webp 不是合法值,直接被 CDN 忽略
  • CDN 依据请求头 Accept 协商编码,浏览器声明支持 webp 或 avif 时才返回新格式
  • 用 curl、截图工具或部分爬虫抓图时不带 Accept,拿到的永远是 JPEG,容易误判为没生效
  • 源图是带透明通道的 PNG,转有损格式会被跳过,输出仍是 PNG

处理步骤#

  1. 用 curl -H 'Accept: image/webp' -I 请求图片地址,读返回的 content-type
  2. 换成 Accept: image/avif 再请求一次,确认该店铺是否已启用 AVIF 编码
  3. 删掉手写的 format=webp,只在需要渐进式加载时保留 format: 'pjpg'
  4. 在 DevTools 的 Network 勾掉 Disable cache,看 Type 列是否显示 webp
  5. 若图片经过自建代理,检查代理有没有把 Accept 头剥掉再转发

验收标准#

真实浏览器请求同一地址返回 content-type: image/webp 或 avif,体积较 JPEG 下降 25% 以上。

本文由 风格技术 技术团队整理,适用于 Shopify 标准版与 Plus 店铺。Shopify 平台能力迭代较快,具体操作路径与字段以官方文档和店铺后台实际版本为准。