Hydrogen 里图片怎么用 Shopify CDN 自动优化

现象#

Headless 站点图片直接用了原图 URL，首屏很慢，也没有响应式尺寸。

原因#

• 没有使用 Hydrogen 的 Image 组件
• 手工拼 URL 缺少 width 参数
• 未设置宽高导致 CLS

处理步骤#

1. 用 <Image data={image} sizes="..." loading="eager|lazy" />
2. 首屏图设 loading="eager"，其余 lazy
3. 传入 widths 或 aspectRatio 生成 srcset
4. 确认 CDN 域名允许，必要时配置 remotePatterns

验收标准#

图片按视口加载合适尺寸，格式为 WebP/AVIF，CLS 小于 0.1，LCP 明显改善。