WebP 无损压缩后图片反而变大了，怎么回事？

Newb.希玲提问于 2026-03-20 06:38:18 阅读 55

优化

我用 cwebp 工具对一张 PNG 图片做了无损 WebP 转换，结果文件体积比原图还大了 20%。不是说 WebP 无损压缩效率更高吗？是不是我哪里用错了？

我在 CSS 里是这样引用的：

.hero-image {
  background-image: url('./assets/banner.webp');
  width: 100%;
  height: 400px;
}

我来解答赞 16 收藏

反馈

1 条解答

UX-爱静 Lv1

这种情况挺常见的，不是你用错了，而是 WebP 无损压缩的特性决定的。

WebP 无损压缩对照片类图片效果确实好，但对以下几种图片反而可能更大：

一是调色板图片（PNG-8/索引色），比如截图、图标、简单色块的图，原 PNG 已经用颜色表压缩得很好，WebP 无损模式反而没优势。

二是小尺寸图片，WebP 的头部和元数据开销相对固定，小图很容易越压越大。

三是本身已经高度压缩的 PNG，再压基本没空间。

解决办法很简单，先用有损压缩试试：

cwebp -q 80 input.png -o output.webp

参数从 0 到 100，默认是 75，一般 80-90 肉眼看不出区别，文件大小能小很多。

如果非要无损，可以试试强制更激进的压缩：

cwebp -lossless -z 9 input.png -o output.webp

参数 1-9，越高压缩越慢，但效果不一定更好。

还有个土办法——先转成有损 WebP 再无损压缩：

cwebp -q 1 input.png -o temp.webp && cwebp -lossless temp.webp -o output.webp

这招对某些图意外地管用。

最后提一下，如果你的图是照片/渐变这些，直接用有损 WebP 就对了，体积通常能少 30%-50%，视觉质量完全够用。

2026-03-20 07:02