关于 PNG 转 WebP
WebP 的设计目标是在网页上同时取代 PNG 和 JPG。它像 PNG 一样支持无损压缩和 alpha 通道，但编码效率高得多——平均比同等 PNG 小约 26%，对大片纯色区域的图片节省更多。
这个体积差距正是该转换常出现在性能审计报告中的原因。图片通常是页面中最重的部分，页面上最大的可见元素也往往是一张图片，因此把 PNG 转为 WebP，是少数无需改动应用代码就能改善核心性能指标的做法之一。
浏览器支持已不再是问题：所有现代浏览器都能显示 WebP，Safari 自 14 版起也支持。如果确实还要兼容老设备，可以在 picture 元素中提供 WebP，并附上 PNG 作为后备源，浏览器会自行选择能显示的那一个。
常见问题
- WebP 像 PNG 一样保留透明度吗？
- 保留。WebP 支持完整的 alpha 通道，所以转换后透明背景依然完好。这正是在需要更小文件又不想牺牲透明度时，选择 WebP 而非 JPG 的主要原因。
- WebP 比 PNG 小多少？
- 无损模式下平均小约 26%；对于徽标、截图和界面图等大片纯色区域的图片，节省会大得多。以有损模式保存的照片内容则会小得多。
- 所有浏览器都支持 WebP 吗？
- 是的，所有现代浏览器都能显示 WebP，包括 Safari 14 及更高版本。对于非常老的设备，请把 WebP 放在 picture 元素中，并附上 PNG 源，让浏览器自动回退。