Storefront API 图片转换参数不生效怎么办
现象#
请求里带了 transform: { maxWidth: 800 },返回的图片仍是原图尺寸,移动端加载很慢。
原因#
- 转换参数写在
url之外的位置,或用了旧字段名 - 对非图片资源(如视频封面)使用转换,接口直接忽略
- CDN 缓存了未带参数的旧地址
处理步骤#
- 按当前 schema 使用
image { url(transform: { maxWidth: 800, maxHeight: 800 }) } - 按用途准备 2-3 档尺寸(缩略图、列表、详情大图),不要全部用原图
- 给
img补srcset,让浏览器按屏幕密度选择 - 更换参数后换一个查询字符串验证,排除 CDN 缓存干扰
验收标准#
返回图片的 URL 中带尺寸参数,实际下载体积明显下降;页面清晰度可接受。
本文由 风格技术 技术团队整理,适用于 Shopify 标准版与 Plus 店铺。Shopify 平台能力迭代较快,具体操作路径与字段以官方文档和店铺后台实际版本为准。