PNG 转 WebP 会丢透明背景吗?
不会。WebP 的有损和无损两种模式都带透明通道,PNG 能透明靠的也是这个。Google 的 WebP 文档写到:无损 WebP 一般比 PNG 小约 26%;可以接受有损时,带透明的有损 WebP 通常只有原 PNG 的三分之一左右。这是 Google 给的数字,不是对你这张图的测量;你这张图实际省多少,转换器会直接显示。
只有当转换器在保存前先在图片后面铺一层底色时,透明才会丢。本页的转换器不会这样做:它把 PNG 画到一块空白画布上,再把画布导出成 WebP,所以透明的地方仍然透明。
在浏览器里把 PNG 转成 WebP
- 在页面顶部的转换器里选择 PNG。文件只在当前标签页里读取,不上传,也不用注册。
- 目标格式保持 WebP。
- 点击转换,原图大小和 WebP 大小会并排显示。
- 在深色背景上看一眼预览,确认透明边缘正常,然后在关闭标签页前下载。转换后的文件不会保存在任何地方。
想在完整页面里操作,同一个工具也在免费 PNG 转 WebP 转换器。单边最大 12,000 像素、总像素最多 4800 万,手机照片和大尺寸导出图都能处理。
固定 90% 质量意味着什么
转换器用 90% 质量写出有损 WebP。照片、商品图、边缘柔和的 logo 和大部分网页图片,在正常尺寸下很难看出和 PNG 的区别,文件却小很多。透明区域保持不变,被压缩的是图片内部的颜色。
能看出差别的是那种一像素宽的硬边:像素画、截图里的小字、细线稿和二维码。把预览放大看看,如果边缘发虚,这张图就保留 PNG,或者改用图片压缩工具来减小体积。
这些情况保留 PNG
- 还要继续编辑的源文件。有损格式每保存一次都会多损失一点。PNG 留作母版,网页上用导出的 WebP。
- 不收 WebP 的应用和平台。一些老应用、上传表单和印刷服务仍然只要 PNG 或 JPG。同一个转换器也能把 WebP 转回 PNG 或 JPG。
- 网站图标。浏览器和手机要的是 ICO 和几种尺寸的 PNG,请用网站图标生成器生成整套。
我的 PNG 是白底,不是透明底
转换不会凭空造出原本没有的透明。如果 PNG 是纯白或纯色背景,先用透明 PNG 制作工具去掉背景,再把结果转成 WebP。透明背景上干净的抠图,也是一张图生成 3D时最好的输入,可以看看为什么生成前要先裁剪。
常见问题
转出来的 WebP 在所有浏览器里都是透明的吗?
新版 Chrome、Edge、Firefox 和 Safari 都能正常显示带透明的 WebP。写出 WebP 是另一回事:少数浏览器(主要是较老的 Safari)不能从画布编码 WebP,会改为输出 PNG。如果转出来的文件没有比原图小,换 Chrome、Edge 或 Firefox 再试。
文件会上传到服务器吗?
不会。PNG 在你的浏览器标签页里解码、重新编码,下载也直接来自这个标签页。
能一次转很多张吗?
转换器一次处理一张。整个文件夹批量转换,用构建脚本或 Google 的 cwebp 命令行工具更合适。
为什么转出来的 WebP 比 PNG 还大?
很小、颜色很少的平面图形,PNG 本来就压得很好,就会出现这种情况。这时保留 PNG 即可,转换器里的大小对比一眼就能看出来。
下一步
在上面的工具里转一张 PNG,对比一下大小。如果这张图要放在商品页上,更小的透明 WebP 在手机上加载更快,看起来却没有变化。