用途：电商商品图通常是页面最大资源，也是 LCP 不佳的主因。该技能用于搭建图片优化流程：按需尺寸缩放、转换为 WebP/AVIF、通过 CDN 就近分发、对首屏以下图片懒加载。
适用时机：商品页因图片过大导致 LCP 超过 2.5 秒；为新无头店面搭建图片管线；供应商原图达数 MB 需自动化处理；为仅提供 JPEG/PNG 的店面增加 WebP/AVIF；监测 Core Web Vitals 时图片为主要瓶颈。
主要做法：先判断平台自带能力——Shopify 自带 CDN（Fastly，自动 WebP 与响应式尺寸），用 Liquid 的 image_url 过滤器并设宽度和宽高属性，首屏以下加 loading="lazy"，仅 LCP 图用 loading="eager" 与 fetchpriority="high"；BigCommerce 亦自带 CDN 与 WebP，用 Handlebars 的 getImageSrcset；WooCommerce 默认无 CDN 与 WebP，需装 Imagify 或 ShortPixel，再加 Cloudflare 或 BunnyCDN，并用 wp media regenerate --only-missing 重建缩略图；自建/无头可选 Cloudinary（托管）或 Sharp（自托管）配对象存储与 CDN。
最佳实践：所有 img 显式设置 width 与 height 以防 CLS；不要放大图片；用文件名内容哈希做缓存失效；用 RUM 监测生产 LCP；AVIF 建议上传时预生成，实时转换用 WebP。
限制与注意：价格、免费额度等以官方最新信息为准；WooCommerce 需主机支持 GD 或 Imagick；Sharp 原生二进制需匹配生产架构，加入 dependencies 而非 devDependencies；CDN 首次请求未命中时需预热热门商品图。