运营GO

图片格式迁移 WebP/AVIF：一次换格式的提速记录

运营GO 编辑部

标签：、

去年做了一次全站图片格式迁移，印象最深的是首页那张 180KB 的 PNG 产品图，转成 WebP 后 62KB，再转 AVIF 只剩 28KB。页面总图片体积从 2.4MB 降到 800KB，LCP 从 3.2 秒掉到 2.1 秒。没加缓存、没动服务器，光换格式就砍掉一半体积。这篇文章把迁移的完整步骤和几个容易踩的坑写清楚，你照着做，一天就能把全站图片体积压下来。

快速结论

  • 照片统一转 WebP 或 AVIF，带透明的图先试 WebP，截图/纯色块用 AVIF 收益最大。
  • 迁移三步走：评估现状 → 批量转换 → 优雅降级（用 做多格式回退）。
  • 质量参数别一刀切：照片 80 左右，截图/图标 75 甚至更低都看不出差别。
  • 转换后必须保留 alt 文本和文件名，并用 Lighthouse 复测 LCP，目标图片体积砍半、LCP 提升 0.5 秒以上。
四种图片格式怎么选JPEG体积中·画质好·全兼容PNG无损·支持透明·体积大WebP通用推荐·约 JPEG 70%AVIF最小·约 JPEG 40%·新浏览器

图：四种格式的取舍（运营GO 整理）

四种格式怎么选

格式体积画质兼容性适用
JPEG中好全照片
PNG大最好（无损）全截图、透明图
WebP小（约 JPEG 的 70%）好极广通用推荐
AVIF最小（约 JPEG 的 40%）更好较新浏览器追求极致提速

原则：照片用 WebP 或 AVIF，带透明通道的图形先试 WebP（支持透明），截图这类色彩简单的用 AVIF 收益最大。如果你的站还在用 HTTP（没上 HTTPS），先去修混合内容问题——浏览器对 HTTPS 页面里的 HTTP 图片会直接拦截，转格式前这关不过，图都加载不出来（站内这篇讲修法）。

一个常见的判断误区是「新格式一定比旧的好」。AVIF 体积最小没错，但它对服务器的编码压力大、部分老安卓机解码慢，反而可能拖慢首屏。稳妥做法是先用 WebP 全量铺，把 LCP 压下来，再挑体积最大的前 20 张图单独转 AVIF 做 AB——哪头 LCP 更低用哪头，别盲目全站 AVIF。我见过一个站全量 AVIF 后，中低端安卓机上 LCP 反而涨了 0.3 秒，回退 WebP 才正常，所以实测永远比理论重要。

迁移三步走

第一步：评估现状。 先跑一遍全站，统计图片格式分布和体积占比，找出体积 TOP 50 的图——通常 20% 的图占 80% 的体积，先啃大头。WordPress 站可以直接用媒体库筛选，或者写个小脚本扫一遍 uploads 目录按体积排序。一个实用的基准线：单张图超过 100KB 就值得转，超过 300KB 必须优先转。这一步不用急，半小时就能定位该先转哪些。

第二步：批量转换。 小站直接用 WordPress 图片优化插件（ShortPixel、Imagify 都行，会动 CDN 层的自动转格式，还能顺带生成 回退）；大站或技术团队可以用命令行工具批量转，`cwebp` 转 WebP、`avifenc` 转 AVIF，一条命令处理一个目录，设置质量参数 75-80 基本无感。命令行方式的好处是可控、可复现，迁移脚本写一次，以后换图直接跑。具体命令长这样：

# WebP：质量 80，遍历目录
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done
# AVIF：质量 75
for f in *.jpg; do avifenc --min 75 --max 75 "$f" "${f%.jpg}.avif"; done

跑之前先在同一目录挑 3 张代表性图（一张照片、一张截图、一张带文字的图）手动转一遍，放大看画质拐点，确认质量参数合适再全量。别把整个 uploads 一次性扔进去——万一批处理脚本有坑，回滚能累死人。先转今年和上季度的图（通常也是流量最大的），历史归档图排第二批。

第三步：优雅降级。 老浏览器不认 WebP/AVIF，用 `` 标签做多格式回退：

<picture>
  <source srcset="img.avif" type="image/avif">
  <source srcset="img.webp" type="image/webp">
  <img src="img.jpg" alt="描述">
</picture>

浏览器优先加载 AVIF，不支持就回退 WebP，再不行用 JPEG。img 标签必须保留，它是爬虫读取图片的入口，也保证最坏情况下图片可见。如果你用插件做转换，这层回退通常自动生成，不用手写；但自己接 CDN 的要注意确认回退链完整。想系统看图片和前端性能的关系，可以对照 技术 SEO 手册 里核心网页指标那节。

质量参数怎么调

别一律用默认值。照片类图源复杂，质量设 80 左右稳妥；纯色块、图标、截图这类，75 甚至更低都看不出区别，能再省一截体积。转换后逐张抽查关键页面图片，放大看边缘有没有色块、文字有没有糊。批量转换最怕「一刀切」，花十分钟抽查，能避免一批糊图上线。一个实用经验：同一批图先转 3 张不同质量（70/75/80），自己放大比对，选画质和体积拐点那个值，再批量跑。

别忽略的细节

  • 转换后 alt 文本和图片文件名要保留，这是图片 SEO 的基本盘，换了格式不能把属性换丢。
  • CDN 层如果开启了图片压缩，注意别和本地转换双重压缩——叠两次压缩画质会肉眼可见地糊。
  • 转换完用 PageSpeed 或 Lighthouse 重新跑一遍，对比前后体积和 LCP。

目标定得实际一点：图片体积砍掉一半、LCP 提升 0.5 秒以上，就是一次合格的迁移。做完这步，再回头看核心网页指标里的 LCP 项，会发现这是全站提速里性价比最高的一刀——比改服务器、加缓存都快，因为图片往往就是体积大头。

迁移后怎么监控

转完不是结束。一周内去 Google Search Console 的「核心网页指标」报告看一遍，确认实验室数据和现场数据都掉了下来；如果某个模板（比如文章页头图）LCP 没改善，多半是那张图没被转换覆盖，回去补转。同时留一份迁移前后的体积对比表，下次汇报提速成果直接拿出来用，也比口头说「好像快了」有说服力。

下一步行动清单

  • 今天先跑评估，导出全站图片体积 TOP 50，确认哪些是 PNG 大图可以转。
  • 小站装一个图片优化插件并开启 WebP/AVIF 自动转换；大站写好命令行批处理脚本。
  • 确认关键页面已用 做回退，老浏览器不白屏。
  • 转换后逐张抽查画质，质量参数按图类型分档设，别全局一个值。
  • 用 Lighthouse 复测 LCP，记录迁移前后数字，达标（体积减半、LCP +0.5s）再全量推。

相关阅读