PNG 的问题：透明背景的代价
PNG 是网页上带透明背景图片的传统选择：抠好的商品图、人物剪影、按钮、贴纸、带阴影的 Logo。但 PNG 是无损格式，遇到照片类内容时体积会非常大。一张 1000 × 1000 的抠图商品图，PNG 可能有 1–2 MB，放在商品列表或首页上，一屏十几张，手机网络下加载就很慢。
过去如果想让它变小，只能转 JPG，但 JPG 不支持透明，背景就没了。WebP 解决了这个矛盾：它既支持透明通道，又能像 JPG 一样做有损压缩，同样的抠图商品图转成 WebP，常常只有几百 KB 甚至更小。
适合转成 WebP 的 PNG
| 图片类型 | 效果 | 建议 |
|---|---|---|
| 抠图商品图、人像剪影 | 体积减少 70–90% | 非常适合，质量 80–85 |
| 带渐变、阴影的设计素材 | 明显减小 | 适合，质量 85–90 |
| 照片类截图 | 明显减小 | 适合，质量 80–85 |
| 颜色很少的小图标 | 可能不减反增 | 保留 PNG，或改用 SVG |
| 文字很多的界面截图 | 视内容而定 | 质量 90 以上，对比后再决定 |
常见用途
- 独立站和商城的商品图。 白底或透明底的商品图换成 WebP，列表页加载更快。
- 网页设计素材。 落地页上的插图、装饰元素、带透明效果的 Banner。
- 小程序和 H5 活动页。 活动页往往有大量带透明效果的素材，用 WebP 可以明显减小总体积。
- 网站 Logo 和头像。 如果原图是照片质感的 Logo，WebP 比 PNG 小得多；纯色扁平的 Logo 则用 PNG 或 SVG 更合适。
兼容性需要注意的地方
所有主流浏览器都支持 WebP：Chrome、Edge、Firefox 很早就支持，苹果从 Safari 14（2020 年）起也支持了，现在的 iPhone 和 Mac 都能正常显示。真正要注意的是浏览器之外：旧版设计软件、部分看图软件、打印服务和网上办事系统可能不认 WebP。所以建议保留原始 PNG 作为源文件，WebP 只作为发布到网站上的版本。
转换是怎么做的
PNG 在浏览器的后台线程里解码，透明通道原样保留，然后用 Google 的 libwebp 编码成有损 WebP。整个过程都在你的设备上完成。如果不需要透明背景、只想让文件变小，也可以用 PNG 转 JPG；照片类素材转 WebP 请看 JPG 转 WebP。如果你手上的 WebP 需要转回其他格式，可以用 WebP 转 PNG。