图片迁移实战：把全站图片换成 WebP/AVIF

同一组图从 4.2MB 压到 700KB 的过程记录：工具、参数、回退方案一次讲清。

图片平均占页面体积的 80%，优化图片是性价比最高的提速手段。这篇按真实迁移流程写：先转格式，再改 HTML，最后验证，全程不装任何付费工具。

第一步：批量转换

macOS 用 Homebrew 装 cwebp，一行转全站：

for f in *.png *.jpg; do cwebp -q 82 "$f" -o "${f%.*}.webp"; done

• q 参数 75 到 85 是甜区，肉眼几乎无损

• 照片类（JPG 源）收益最大，通常能减 60% 到 80%

• PNG 截图转 WebP 也有 50% 左右收益

追求极致再上 AVIF：同画质再小 20% 到 30%，但编码慢、兼容性差一档，建议只给首屏大图用。

第二步：HTML 双格式回退

picture 元素让旧浏览器自动落回 PNG/JPG：

<picture>
  <source srcset="/img/hero.avif" type="image/avif">
  <source srcset="/img/hero.webp" type="image/webp">
  <img src="/img/hero.jpg" alt="春季新品系列" width="1200" height="800" loading="lazy">
</picture>

三个要点：img 上的 alt、宽高、懒加载一个都不能少；source 的顺序就是优先级顺序；老浏览器忽略不认识的 source，直接落到 img。

第三步：验证与清理

转换后全站搜一遍旧扩展名，确认没有遗漏的 img 还在引用 PNG/JPG；Lighthouse 的 Opportunities 里如果还提示图片优化，点开看具体是哪张、提示什么——通常是某张漏网或尺寸给得过大。

两张验收标准：Network 面板里图片总量降到原来的三分之一以下；Lighthouse 的 Serve images in next-gen formats 一项打勾。

别忘了 OG 分享图

社交平台的抓取器对 WebP 支持参差不齐，og:image 老老实实保留一张 1200×630 的 JPG 或 PNG，别跟着全站一起转。分享图加载慢不影响页面性能，兼容优先。