2026-08-12
webp vs png 是网页图片优化的经典选择题。选错要么文件大得离谱，要么画质肉眼可见地变差。这篇从压缩原理讲起：为什么 PNG 适合图形和截图、WebP 为什么在体积上全面占优、透明通道怎么处理，以及 2026 年实际该怎么做。
PNG 是无损压缩：一个像素都不丢，代价是文件大，同样的内容通常是 JPG 的 5-10 倍。WebP 两者都做：有损 WebP 用更聪明的算法，比同画质 JPG 小 25-35%；无损 WebP 又比 PNG 小 20-30%。也就是说，WebP 在两头都赢，只是赢多赢少的问题。
关键差异在透明通道：PNG 的 alpha 透明是行业标准，所有工具都支持；WebP 也支持透明，而且带透明的 WebP 比带透明的 PNG 小得多。这是 WebP 最容易被忽略的优势。
一句话原则：新项目默认 WebP，只有在明确需要老环境兼容时才回退 PNG。
无损 WebP 和 PNG 画质完全一样，只是体积小 20-30%。有损 WebP 在质量 80-90 时，照片上和原图几乎无法区分，但体积已经比 PNG 小一半以上。真正需要担心的不是画质，而是你的转换工具：质量参数设置太低才会出问题。
对截图和文字类图形，用有损 WebP 也要小心，文字边缘会出现压缩噪点。这类内容要么用无损 WebP，要么直接保留 PNG。
2026 年所有主流浏览器都支持 WebP，Safari 也早已原生支持。<picture> 标签可以让你同时提供 WebP 和回退格式，兼顾性能和兼容性。如果你还在犹豫，把 WebP 作为默认、PNG 作为兜底，基本不会错。
无损 WebP 和 PNG 画质完全相同，但 WebP 体积小 20-30%。有损 WebP 画质取决于质量参数，设置 80-90 时肉眼几乎无差别。
支持。而且带透明的 WebP 比带透明的 PNG 小得多，这是 WebP 最容易忽略的优势。
能。几乎所有的图片工具都支持转换，转换后体积通常能减少 20-50%。转之前备份原图，避免有损参数设置太低。
默认 WebP。所有主流浏览器都支持，配合 <picture> 标签给老浏览器回退 JPG 或 PNG 即可。只有明确需要最大兼容性时才用 PNG。