# 图片优化
> 让 Shoplazza 主题更快：用 img_url 请求合适尺寸、用 srcset 提供响应式候选、避免布局偏移，并懒加载首屏外的图片。
图片通常是店铺页面上体积最大的资源。优化图片能让商家的店铺保持快速，提升其顾客的体验。在主题中渲染图片时，遵循以下实践。
## 提供尺寸合适的图片
不要直接渲染原始大图。用 [`img_url`](/zh-CN/docs/theme/references/liquid/filters/media#img_url) 过滤器加尺寸，请求与展示尺寸相匹配的图片：
```liquid title="代码"
{{ product.image | img_url: '600x' }}
```
只请求你需要的宽或高，另一维按比例缩放。针对高像素密度（视网膜）屏幕，用 `scale` 参数提供更清晰的图片：
```liquid title="代码"
{{ product.image | img_url: '600x', scale: 2 }}
```
## 用 srcset 提供响应式图片
单一尺寸无法适配所有屏幕。用 `srcset` 提供多个宽度，让浏览器按设备的视口和像素密度自动选择最合适的一张。每个候选图用 `img_url` 生成：
```liquid title="代码"
```
这段标记里每一部分的作用：
- **`src`** —— 不支持 `srcset` 的浏览器使用的兜底图片。
- **`srcset`** —— 候选图列表。每一项是「图片 URL + 宽度描述符」：`300w` 表示这张图实际宽 300 像素。你提供多个宽度，让浏览器自己选。
- **`sizes`** —— 图片排版后将占据多大空间，让浏览器在还不知道图片真实尺寸时就能选出候选图。这里 `(max-width: 600px) 100vw, 600px` 表示「屏幕宽度不超过 600px 时占满视口宽度，否则固定 600px」。
- **`width` 和 `height`** —— 图片的固有像素尺寸，用于预留空间、避免布局偏移（见下一节）。
- **`alt`** —— 文本替代，经 `escape` 转义，避免文本里的引号破坏属性。
浏览器综合 `srcset` 的宽度、`sizes` 和设备像素密度，只下载一张尺寸合适的图片。
## 预留空间，避免布局偏移
图片在未声明尺寸的情况下加载时，周围内容会随图片出现而跳动，损害 [Cumulative Layout Shift](https://web.dev/cls/)。在 `![]()
` 元素上设置 `width` 和 `height`，让浏览器在图片加载前先预留空间。[image object](/zh-CN/docs/theme/references/liquid/objects/image) 提供了这些值：
```liquid title="代码"
```
## 懒加载首屏外的图片
给首屏以下出现的图片加 `loading="lazy"`，让浏览器延迟到需要时再加载：
```liquid title="代码"
```
不要对页面首次渲染时就可见的图片（如 hero 横幅或商品主图）懒加载。对首屏图片懒加载会拖慢 [Largest Contentful Paint](https://web.dev/lcp/)。
## 预加载首屏主图
对首次加载时可见的最大图片，在页面 `` 中添加预加载提示，让浏览器更早获取它：
```liquid title="代码"
```
只预加载这一张——预加载过多资源会争抢带宽、拖慢页面。关于 [`preload_tag`](/zh-CN/docs/theme/references/liquid/filters/html#preload_tag) 过滤器和其他资源提示，见[性能](/zh-CN/docs/theme/best-practices/performance)。