你有没有遇到过这种场景？
打开一个网页，图片加载转圈圈转了半天。
你点开开发者工具一看——好家伙，一张banner图占了2MB。
如果这张图用WebP格式，可能只要400KB。
WebP是什么？
一句话：WebP是Google在2010年推出的一种现代图片格式。
它的目标很明确：让图片文件更小，但画质不缩水。
打个比方：
- JPEG像老式压缩包，压得狠了画面就糊
- PNG像保鲜膜，封得严但体积大
- WebP像真空包装机，又紧又薄，东西还新鲜
WebP为什么这么小？
核心秘密在于它用了两种压缩算法，分别对付不同的场景。
有损压缩（类似JPEG）
WebP用了一种叫"预测编码"的技术。
它不是简单地把整张图压扁，而是分析相邻像素之间的关系。
比如一片蓝天，WebP发现左边是#1a5fbb，右边也是#1a5fbb，那它就不重复存这个颜色，只记一次。
结果：同样画质下，WebP比JPEG小25%~35%。
无损压缩（替代PNG）
WebP的无损模式用了更聪明的算法。
它会预测每个像素的值，然后只存储"预测值"和"实际值"之间的差。
如果预测很准，差值很小，数据量就骤降。
结果：同样画质下，WebP比PNG小25%~34%。
WebP vs PNG vs JPEG，怎么选？
| WebP | PNG | JPEG | |
|---|---|---|---|
| 有损/无损 | 都支持 | 仅无损 | 仅有损 |
| 透明背景 | ✅ | ✅ | ❌ |
| 动画支持 | ✅ | ❌ | ❌ |
| 兼容性 | 现代浏览器全覆盖 | 全覆盖 | 全覆盖 |
| 典型压缩率 | 最优 | 最差 | 中等 |
选择原则很简单：
- 照片类图片 → WebP有损或JPEG
- Logo、图标、需要透明背景 → WebP无损或PNG
- 需要动图 → WebP动画（替代GIF）
- 要兼容IE → 还是JPEG吧，IE不支持WebP
怎么用WebP？
前端使用
直接像普通图片一样引用就行：
<img src="photo.webp" alt="示例图片">
为了兼容老浏览器，可以写个降级方案：
<picture>
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="示例图片">
</picture>
浏览器先尝试加载WebP，不支持就自动回退到JPEG。
生成WebP图片
方法一：用命令行工具cwebp（Google官方）
cwebp -q 80 input.png -o output.webp
-q参数控制质量，80是一个不错的平衡点。
方法二：用在线转换工具
搜"PNG转WebP"有一堆免费工具。
方法三：用开发框架批量处理
比如Next.js、Vite都有WebP转换插件，构建时自动把现有图片转成WebP。
WebP支持哪些特性？
除了基本的静态图片，WebP还支持：
- Alpha通道：半透明效果，PNG的强项，WebP也能做
- 动画：类似GIF，但文件更小、帧率更高
- HDR和广色域：新版WebP支持更广的颜色范围
- 元数据：可以嵌入EXIF、ICC色彩配置等信息
什么时候不该用WebP？
虽然WebP很优秀，但也有不适合的场景：
- 需要编辑的图片源文件 → 用PSD、TIFF等专业格式
- 打印用途 → 印刷行业还在用CMYK色彩空间，WebP不支持
- 极老旧系统 → 某些嵌入式设备或老版本的Android/iOS
- 需要逐像素精确匹配 → WebP有损压缩会有微小失真
常见问题
Q：WebP真的比JPEG小这么多吗？
是的。Google官方测试显示，在相同视觉质量下，WebP比JPEG小25%~34%（有损），比PNG小26%（无损）。实际项目中经常能省下一大半带宽。
Q：WebP会影响SEO吗？
不会。Google自家就推WebP，搜索引擎完全支持。而且页面加载更快了，对SEO反而是加分项。
Q：WebP图片能在微信里发吗？
可以。主流App和操作系统都已经在2020年前后全面支持WebP了。
Q：WebP有版权风险吗？
没有。WebP是开放标准，任何人都可以使用，不需要支付许可费。
总结
WebP就是图片格式的"性价比之王"。
体积小、画质好、功能全（有损+无损+透明+动画），还不收版权费。
如果你的网站还在用原始尺寸的PNG和JPEG，换成WebP可能是你做过最简单的性能优化之一。
现在去把站里的图片转一转，你会发现页面加载速度快了不少。