如果把电商页面的流量做一个解剖，商品图通常占 70% 以上。图片优化是性能优化的主战场，投入产出比最高。这篇专项指南把图片优化一次讲透。
格式选择
WebP 是当前的安全选择：比 JPEG 小 25-35%，全主流浏览器支持；AVIF 更小但编码慢、兼容性有长尾。商品主图用 WebP（质量 80 左右是甜点位），需要透明的用 WebP/PNG，图标小图用 SVG。
尺寸策略
- 响应式图片。按展示尺寸出图：列表缩略图 300px、详情主图 800px、放大镜 1500px，别让用户为列表页下载 3000px 原图。
- srcset 自适应。不同 DPR 与屏宽加载不同尺寸，移动端流量直接省一半。
- 图片服务化。用图片处理服务（URL 参数控制尺寸/格式/质量）替代手工出图，一图多尺寸自动生成。
CDN 配置要点
图片域与主域分离（并行下载不受域名连接数限制）；缓存 TTL 设长（图片不变，URL 带版本号刷新）；开启 Brotli/gzip（对 SVG/CSS/JS）；海外业务选有海外节点的 CDN，别让海外用户回源国内。
监控与守门
建立图片体积的“守门”机制：上传时自动压缩、超限拒绝；上线前跑一遍 Lighthouse，图片项有告警必须处理。图片优化是一次配置、长期受益的事，但需要机制防止劣化回潮。