跳到主要内容

PNG 转 WebP 会丢透明背景吗?浏览器里直接转

WebP 会保留 PNG 的透明背景。在浏览器里把透明 PNG 转成 WebP,不上传、不注册,对比转换前后的大小,并了解哪些情况应该继续用 PNG。

Guides发布于

免费 PNG 转 WebP 转换器

浏览器本地处理,保护隐私

在浏览器里把 PNG 或 JPG 转成 WebP,无需上传;遇到不支持 WebP 的应用时,也能把 WebP 导出为 JPG 或 PNG。

免费 PNG 转 WebP 转换器
在浏览器里把 PNG 或 JPG 转成 WebP,无需上传;遇到不支持 WebP 的应用时,也能把 WebP 导出为 JPG 或 PNG。

拖入文件或点击浏览

等待文件中

先添加一个文件再开始。

原始大小

-

输出大小

-

已保存

-

仅在浏览器本地处理,不上传。

原始大小

等待文件中

输出大小

等待文件中

TL;DR
会保留。WebP 有透明通道,透明背景的 PNG 转成 WebP 之后仍然是透明的。上面的转换器在浏览器里运行,固定用 90% 质量写出 WebP,透明像素原样保留,并把原图和新文件的大小并排显示。如果你要像素级清晰的边缘,或者之后还要继续编辑,就保留 PNG。

PNG 转 WebP 会丢透明背景吗?

不会。WebP 的有损和无损两种模式都带透明通道,PNG 能透明靠的也是这个。Google 的 WebP 文档写到:无损 WebP 一般比 PNG 小约 26%;可以接受有损时,带透明的有损 WebP 通常只有原 PNG 的三分之一左右。这是 Google 给的数字,不是对你这张图的测量;你这张图实际省多少,转换器会直接显示。

只有当转换器在保存前先在图片后面铺一层底色时,透明才会丢。本页的转换器不会这样做:它把 PNG 画到一块空白画布上,再把画布导出成 WebP,所以透明的地方仍然透明。

在浏览器里把 PNG 转成 WebP

  1. 在页面顶部的转换器里选择 PNG。文件只在当前标签页里读取,不上传,也不用注册。
  2. 目标格式保持 WebP。
  3. 点击转换,原图大小和 WebP 大小会并排显示。
  4. 在深色背景上看一眼预览,确认透明边缘正常,然后在关闭标签页前下载。转换后的文件不会保存在任何地方。

想在完整页面里操作,同一个工具也在免费 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 在手机上加载更快,看起来却没有变化。

继续阅读