网站图片还不用 WebP？这些好处你可能低估了

我做独立开发这些年，见过太多网站打开慢，根本不是代码的问题——就是几张 2、3MB 的原图在拖后腿。图片优化里投入产出比最高的一招，就是把 JPG/PNG 换成 WebP。

WebP 到底好在哪

1. 体积小 25%–35%：同等画质下，比 JPEG 和 PNG 小一大截。一张 200KB 的 JPEG 转成 WebP，通常只有 130KB 出头。
2. 有损无损都支持：JPEG 只能有损、PNG 无损但体积大，WebP 两种模式都有，按需选。
3. 支持透明通道：PNG 的透明图可以直接替换，不用担心背景问题。
4. 动图也行：同样动画，WebP 比 GIF 小得多。

首页 10 张图，批量转一遍就能省掉大几百 KB，首屏加载（LCP）改善非常直观。

对 SEO 是真利好

Google 早就把页面速度（Core Web Vitals）算进排名信号。图片更小 → 加载更快 → LCP 更好，这是实打实的加分项。图片搜索对 WebP 也完全正常收录，不用担心"换格式影响收录"。

顺带一提，AVIF 压缩率更高，但编码慢、兼容性还弱一些。现阶段 WebP 是省心度和收益最平衡的选择。

怎么把图转成 WebP

两条路：

• 命令行批量转：cwebp、sharp、imagemin，适合已经有构建流程的项目；
• 在线工具直接转：不想折腾环境就用网页工具。

我自己做的 zippic 就是后者思路：18 个媒体工具全部在浏览器本地运行，图片不上传，打开页面就能批量转 WebP，运营和编辑同学也能直接用。中文站地址：https://zippic.cn

上线时的兼容写法

个别老浏览器不支持 WebP，用 <picture> 做一行兜底：

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

新浏览器吃 WebP，老浏览器自动回退 JPG，零风险上线。

总结

换 WebP 是我见过改动最小、收益最大的优化之一。下次发文章、做落地页、传产品图，先转一遍 WebP 再上线，页面会快得让你意外。