Shopify 主题与 Liquid

Shopify image_tag 不生成 srcset 怎么修

现象#

把 img_url 换掉后用 image_tag 输出商品卡,2x 屏幕上图仍发虚;DevTools 里 img 只有 src,没有 srcset 和 sizes。

原因#

  • image_tag 只有在同时传入 widths 与 sizes 时才生成 srcset,单传 width 只得到一张图
  • 传进去的是字符串地址而不是 image 对象,读不到原始宽高,无法生成候选尺寸
  • 已经用 image_url 缩过一次,又在 image_tag 里传 width,重复缩放后源图变小
  • 主题里还留着已废弃的 img_url 调用,新参数在那条链路上不生效

处理步骤#

  1. 确认拿到的是 image 对象,例如 product.featured_image,不是 URL 字符串
  2. 输出时给出候选宽度:{{ product.featured_image | image_tag: widths: '300,600,900,1200', sizes: '(min-width: 750px) 50vw, 100vw' }}
  3. 同时补上 alt、width、height,避免布局抖动
  4. 全主题搜索 img_url,逐处替换为 image_url
  5. 在 DevTools 里把设备切到 2x,确认实际下载的是 600 或更大的候选图

验收标准#

商品卡 img 标签带有 srcset 与 sizes,2x 屏加载的图片宽度不小于展示宽度的两倍,放大后边缘清晰。

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