外贸网站图片怎么优化，结论是顺序优先于技巧：先按显示尺寸裁切，再转 WebP，最后补懒加载与 alt。一张 3000 px 的原图直接上传，首屏可能多等 1–2 秒；按 3 步处理，单图体积常能压到原来的四分之一。
核心结论
图片优化的收益主要来自体积，格式只是其中一环。同一张图，尺寸裁对能省 60%–80% 字节，转 WebP 再省 25%–34%，懒加载只负责首屏之外的请求。顺序颠倒，前两步的收益会互相抵消。
图片为什么会拖慢外贸网站首屏？
因为图片通常是一个页面里最重的资源。按传输字节统计，图片长期占移动端页面体积的四成以上，产品图密集的 B2B 站点比例更高。LCP 的合格线是 2.5 秒，首屏大图没压下来，其他优化很难把指标拉回去。数据来源：HTTP Archive 2026 年页面体积统计。
「客户打开产品页的前 2 秒，决定他会不会继续往下看。」这是我们做站点诊断时反复提到的一句判断，也是图片优先于动效的原因。
图片格式怎么选？
先看画面类型，再看兼容。产品图与场景图用 WebP 已经够用，需要更小体积的大图可以试 AVIF；图标与线稿保留 SVG；只有必须保留透明的素材才用 PNG。Google 官方文档给出的口径是：同等画质下，WebP 有损压缩比 JPEG 小 25%–34%。
| 格式 | 适用场景 | 体积与兼容 |
|---|---|---|
| WebP | 产品图、场景图、详情长图 | 比 JPEG 小 25%–34%，主流浏览器均支持 |
| AVIF | 大尺寸摄影图、展会现场图 | 体积更小，编码慢，老设备解码成本高 |
| JPEG | 仅作回退版本 | 兼容最广，压缩率最低 |
| SVG | 图标、线稿、参数示意图 | 几 KB 起步，缩放不失真 |
| PNG | 需要透明的标识与截图 | 体积大，非必要不用于照片 |
没有一种格式通吃。做双格式回退的成本，通常低于上线后因兼容问题返工的成本，这一点在旧版 Safari 上尤其明显。
尺寸、懒加载与 alt 的具体写法
尺寸是第一优先级。按 CSS 显示宽度的 2 倍导出即可，1600 px 的产品图放进 800 px 的容器不会更清晰，只会更慢；首屏图不加懒加载，其余图片加 loading 属性，并写死宽高，避免布局跳动。窄屏上的取舍另有一套规则，可对照外贸网站移动端适配的处理方式。
- 尺寸：长边不超过 1600 px，首屏图单张控制在 200 KB 以内
- 格式：照片用 WebP，图标用 SVG，只有透明素材才用 PNG
- 懒加载：首屏第一张图不延迟，其余统一加 loading="lazy"
- alt：写清「产品名 + 材质 + 用途」，不堆关键词，控制在 30 字内
- 文件名：英文加连字符，如 stainless-steel-valve，避免中文与空格
上线前的检查顺序
- 先用 PageSpeed Insights 跑一次移动端，记下 LCP 与图片总字节，作为基线
- 按页面模板各抽 5 张图，核对显示尺寸与实际像素是否匹配
- 检查 alt：内容图必须有描述，纯装饰图留空 alt，避免重复堆词
- 上线 7 天后复查同一组指标，确认 LCP 有下降而不是被其他资源抵消
懒加载的行为细节以 web.dev 图片懒加载说明 为准，alt 与图片收录的判定标准见 Google 图片搜索文档。两步都做完，再回头看外贸网站打开速度优化里的服务端部分。
哪些情况不必继续优化？
页面图片少于 5 张、且首屏只有一张图的站点，图片优化的收益有限，瓶颈多半在服务器响应或脚本执行。这时先把 TTFB 压到 0.8 秒以内，再处理图片。另一类不需处理的是后台与登录页，它们不参与搜索排名，压缩优先级可以往后放。整体结构问题可以回到外贸建站的规划层面一起看，图片只是其中一环。
「图片优化做完不等于页面就快，它只是把最容易拿的那部分分数拿到了。」这是我们在交付复盘里的一致说法。