跳到主要内容

图片优化

图片通常是店铺页面上体积最大的资源。优化图片能让商家的店铺保持快速，提升其顾客的体验。在主题中渲染图片时，遵循以下实践。

提供尺寸合适的图片​

不要直接渲染原始大图。用 img_url 过滤器加尺寸，请求与展示尺寸相匹配的图片：

{{ product.image | img_url: '600x' }}

只请求你需要的宽或高，另一维按比例缩放。针对高像素密度（视网膜）屏幕，用 scale 参数提供更清晰的图片：

{{ product.image | img_url: '600x', scale: 2 }}

用 srcset 提供响应式图片​

单一尺寸无法适配所有屏幕。用 srcset 提供多个宽度，让浏览器按设备的视口和像素密度自动选择最合适的一张。每个候选图用 img_url 生成：

<img
  src="{{ product.image | img_url: '600x' }}"
  srcset="{{ product.image | img_url: '300x' }} 300w,
          {{ product.image | img_url: '600x' }} 600w,
          {{ product.image | img_url: '900x' }} 900w"
  sizes="(max-width: 600px) 100vw, 600px"
  width="{{ product.image.width }}"
  height="{{ product.image.height }}"
  alt="{{ product.image.alt | escape }}">

这段标记里每一部分的作用：

  • src —— 不支持 srcset 的浏览器使用的兜底图片。
  • srcset —— 候选图列表。每一项是「图片 URL + 宽度描述符」：300w 表示这张图实际宽 300 像素。你提供多个宽度，让浏览器自己选。
  • sizes —— 图片排版后将占据多大空间，让浏览器在还不知道图片真实尺寸时就能选出候选图。这里 (max-width: 600px) 100vw, 600px 表示「屏幕宽度不超过 600px 时占满视口宽度，否则固定 600px」。
  • width 和 height —— 图片的固有像素尺寸，用于预留空间、避免布局偏移（见下一节）。
  • alt —— 文本替代，经 escape 转义，避免文本里的引号破坏属性。

浏览器综合 srcset 的宽度、sizes 和设备像素密度，只下载一张尺寸合适的图片。

预留空间，避免布局偏移​

图片在未声明尺寸的情况下加载时，周围内容会随图片出现而跳动，损害 Cumulative Layout Shift。在 <img> 元素上设置 width 和 height，让浏览器在图片加载前先预留空间。image object 提供了这些值：

<img
  src="{{ product.image | img_url: '600x' }}"
  width="{{ product.image.width }}"
  height="{{ product.image.height }}"
  alt="{{ product.image.alt | escape }}">

懒加载首屏外的图片​

给首屏以下出现的图片加 loading="lazy"，让浏览器延迟到需要时再加载：

<img src="{{ product.image | img_url: '600x' }}" loading="lazy" alt="{{ product.image.alt | escape }}">

不要对页面首次渲染时就可见的图片（如 hero 横幅或商品主图）懒加载。对首屏图片懒加载会拖慢 Largest Contentful Paint。

预加载首屏主图​

对首次加载时可见的最大图片，在页面 <head> 中添加预加载提示，让浏览器更早获取它：

<link rel="preload" as="image" href="{{ product.image | img_url: '1080x' }}">

只预加载这一张——预加载过多资源会争抢带宽、拖慢页面。关于 preload_tag 过滤器和其他资源提示，见性能。