为什么我把网站图片全换成了 WebP？

前阵子我给自己的博客做了一次"减肥"，把所有图片从 JPG 换成了 WebP。结果挺意外的——页面体积直接小了 40% 多，加载速度肉眼可见变快了。今天就跟大家聊聊 WebP 这玩意儿到底靠不靠谱。

WebP 是什么来头？

WebP 是 Google 推出来的一种图片格式，2010 年就有了，但最近几年才真正火起来。它最牛的地方就是：同样画质下，体积通常只有 JPG 的 60%-80%，PNG 的 50%-70%。

而且它同时支持有损和无损压缩，还能像 PNG 一样保留透明背景，甚至支持 GIF 那样的动图（Animated WebP）。说白了，它想把 JPG、PNG、GIF 的活儿全包了。

实际转换效果怎么样？

我挑了几张博客里的图做测试。一张 1920×1080 的摄影图，JPG 质量 85 的时候有 380KB，转成 WebP 后只有 210KB，画质基本看不出差别。一组网页截图，PNG 格式总共 1.2MB，转成无损 WebP 后变成 780KB。

当然，不是所有图都合适。颜色特别丰富、细节复杂的照片，WebP 优势最明显；而那种大块纯色、线条简单的图，PNG 有时候反而更小或者更清晰。

转换时要注意的几个坑

第一次批量转 WebP 的时候，我也踩过几个坑，分享出来给大家避避雷。

浏览器兼容：现在主流浏览器都支持 WebP 了，包括 Chrome、Edge、Firefox、Safari。但如果你还要兼容特别老的设备，建议用 picture 标签做兜底，老浏览器回退到 JPG。

画质参数：WebP 的质量设置和 JPG 不是一回事。我的经验是，WebP 设置在 75-85 之间，效果接近 JPG 的 85-90。别直接按 JPG 的习惯填。

透明图：带透明的图记得选无损 WebP，不然透明边缘可能会出现色块。

我的建议

如果你做的是网站、博客、小程序，强烈建议试试 WebP。体积小了，用户加载快了，服务器流量也省了，一举多得。

可以用我们工具箱里的格式转换功能，拖几张图进去对比一下，看看同样画质下能小多少。试过了你大概率会真香。