正在加载您的文件…

将 PNG 转为 WebP

将 PNG 转为 WebP,保留透明度,文件更小。

或将图片拖放到此处

如何将 PNG 转为 WebP

如何将 PNG 转为 WebP

把一张 PNG 拖到上传区,或点击从你的设备里挑选文件。文件一落地转换就开始,没有需要按的「转换」按钮。常见图片的结果远在一秒之内就会出现。准备好后,「下载」按钮会用原文件名保存 WebP,只把扩展名改掉。转换一张图片在你的浏览器中运行,一次转换多张则发送到我们的服务器。同一套代码在桌面和手机浏览器上都能运行,无需安装任何应用。要转下一张图,再拖一张 PNG 进来即可。动态 PNG 会被当作序列中第一张图的一帧静止画面来处理。

透明像素原样进入 WebP

透明像素原样进入 WebP

WebP 支持完整的 8 位 alpha 通道,这意味着你 PNG 里的每一个透明像素,在 WebP 输出里都保持同样的透明。不会有任何地方被填成白色,抠图边缘不会出现光晕,事后也不需要进任何编辑器修补。这正是从带透明度的 PNG 转换时宁选 WebP 而不选 JPG 的根本原因,因为 JPG 没有 alpha,只能把透明像素换成纯色。徽标、图标、产品抠图、界面草模、带圆角的截图,以及任何倚仗透明背景的图片,都会完好地转过去。没有什么开关需要打开来保留透明度,它自动发生,因为携带 alpha 本就是 WebP 设计的一部分。

从 PNG 换到 WebP 的理由

从 PNG 换到 WebP 的理由

主要好处是文件大幅变小,而透明度和画质都完好如初。按照 Google 官方的 WebP 文档,无损 WebP 比同等 PNG 小约百分之二十六,带 alpha 的有损 WebP 则比可比的 PNG 大约小三倍。更小的图片加载更快,这会直接改善 Largest Contentful Paint,它是 Google 的 Core Web Vitals 之一,也是公认的排名信号。PageSpeed Insights 在审计中会把 PNG 标记为以新一代格式提供图片的机会,换用 WebP 便能消除那条建议。WebP 的浏览器支持是普遍的,Chrome、Firefox、Safari 和 Edge 都能原生处理。

画质设置与有损取舍

画质设置与有损取舍

本工具的 WebP 输出以专为网页发布优化的画质设置保存。据 Google 的基准测试,有损 WebP 比同等 JPG 画质的压缩率高出约 30%,而这档设置位于该范围的高端,优先保留细节。专业应用(如 Photoshop 或 Lightroom)在导出 PNG 到 WebP 时推荐的也是类似的画质区间。照片的体积通常减少 50% 到 70%,图形和标志往往缩小幅度更大。对于像素级精确匹配至关重要的场合(如医学影像或印刷母版),请保留原始 PNG,把 WebP 用作发布导出件。

你的 PNG 在哪里处理

你的 PNG 在哪里处理

路径取决于你转换多少个文件。转换单个 PNG 时,工作在浏览器原生图像引擎中运行,在你的设备上,在你的标签页内,不会上传任何东西,也不会记录关于文件内容的任何东西。你可以打开浏览器的网络面板,在转换一张图片时查看,确认没有任何携带该文件的出站请求。一次转换多个 PNG 时,它们会发送到我们的服务器,服务器将它们一起转换并返回一个下载给你。该结果会在约 2 小时内从我们的服务器删除,你也可以在保存的那一刻自行删除。单次转换在你的浏览器中完成,批量则暂时送往服务器,下载完成后约2小时内删除。

原始 PNG 仍是正确选择的时候

原始 PNG 仍是正确选择的时候

WebP 支持广泛,却并非在每种场合都被接受。一些设计工具、印刷流程和内部内容管理系统仍要求 PNG。一些操作系统能原生地拖放 PNG,对 WebP 却需要插件。对于你会在桌面应用里反复打开、反复编辑的工作文件,把无损 PNG 留作母版,可以避免一轮轮解码再重存所累积的损耗。把 WebP 作为网页投放的导出格式,把 PNG 留作源文件。如果你需要反向操作,把 WebP 转回 PNG,webp-to-png 工具可以胜任这一转换。

工作原理

  1. 拖入或挑选你的 PNG

    将 PNG 文件拖到上传区,或点击打开文件选择器。PNG 中的任何透明区域都会在输出中保留。转换一张图片在你的浏览器中运行,而一次放入多张会将它们发送到我们的服务器一起处理。

  2. 等待自动转换

    文件一加载,浏览器就会保存 WebP。对于屏幕分辨率下的多数图片,结果会在远不到一秒内出现,无需按任何按钮。

  3. 查看输出体积

    「下载」按钮会显示输出文件的体积。透明区域在 WebP 里依旧透明,文件也应当明显小于源 PNG。

  4. 下载 WebP

    点击下载即可保存文件。原文件名保持不变,只把扩展名改成 .webp。要转另一张 PNG,把它拖到页面上,每个文件各自独立运行。

相关转换器

如果需要反向转换或其他格式选项,这些工具已准备就绪。

常见问题

把 PNG 转成 WebP 时透明度会保留吗?

会。WebP 支持完整的 alpha 通道,所以你 PNG 里的透明区域在 WebP 输出里依旧透明。从 PNG 起步时宁选 WebP 而不选 JPG,这正是主要原因,因为 JPG 没有 alpha,只能把透明度压成纯色,而 WebP 让抠图保持原样。带透明背景的徽标、图标、产品图和界面素材,都会完好无损地通过转换,不需任何额外步骤。

为什么要把 PNG 转成 WebP?

文件变小了,页面加载就更快。将 PNG 换成 WebP 是在不损画质的前提下提升网站显示速度最直接的方式之一。按 Google 的 WebP 文档,带 alpha 的有损 WebP 则可能小三倍左右。更轻的图片让访客等待的时间缩短,在移动网络较慢的环境下尤为明显。Chrome、Firefox、Safari 和 Edge 的浏览器支持都是普遍的。

把 PNG 转成 WebP 会损失画质吗?

是的,在正常浏览条件下几乎无从分辨。在网页显示分辨率下,本工具的输出与源 PNG 看起来实质上一致。社交媒体帖子、网站横幅、产品图、界面图标,通通可以直接用。除非把图片放大到 100% 像素级逐一对比,否则很难找出差别。转换不会改动源 PNG,它依旧完好保留在你的设备上。

WebP 比 PNG 小多少?

按 Google 官方的 WebP 文档,无损 WebP 比同等 PNG 小约百分之二十六,带 alpha 通道的有损 WebP 则比可比的 PNG 大约小三倍。确切比例取决于图片内容,透明区域大、纯色块多的图形受益最大,而细节极其丰富的照片缩减幅度较小但仍然可观。无论如何,WebP 都更小,而透明度依旧保留。

在这里把 PNG 转成 WebP 安全吗?

这取决于你转换一张还是多张。单个 PNG 直接在你的浏览器中转换,所以该文件不会被上传,你可以打开浏览器的网络面板,在转换期间查看,那里不会出现任何出站图像请求。当你一次转换多张时,它们会发送到我们的服务器一起处理,该结果会在约 2 小时内删除,并可在下载后立即自行删除。无论哪种方式,除了构建你的下载之外,不会保留你图片的任何内容。

WebP 在所有浏览器里都能用吗?

能。WebP 在 Chrome、Firefox、Safari 和 Edge 中都获得原生支持,覆盖了实际使用中绝大多数浏览器。自 2020 年 Safari 14 起,支持就已普遍。如果你面向的受众里可能有很老的浏览器或内嵌网页视图,那么 PNG 仍是最稳妥的选择。对于过去五年内使用现代浏览器的任何受众,WebP 都能可靠运行。你可以在 caniuse.com 的 WebP 条目里查看各浏览器的支持情况。

详细信息

团队关于工艺、格式以及一个好结果背后小决定的笔记。

WebP 为何能比 PNG 更小
WebP 使用两种不同的压缩模式。无损模式把空间预测与色彩预测同一个比 PNG 的 DEFLATE 更精巧的熵编码阶段结合起来,按 Google 公布的基准,在常见图片上能取得约百分之二十六更好的压缩率。有损模式施加一种类似视频压缩的分块变换,用以丢弃在知觉上无关紧要的信息,同时保住眼睛真正看得见的部分。对于带 alpha 通道的图片,WebP 对 alpha 数据采用单独的无损子压缩,对 RGB 数据则采用有损压缩,这正是带透明度的有损 WebP 在同等画质下能比 PNG 小三倍左右的原因。PNG 的 DEFLATE 只能无损,无法利用有损模式所借助的那种知觉取舍。格式上的这一差异解释了这道差距。
细说 alpha 通道
PNG 与 WebP 都支持 8 位 alpha 透明,意味着每个像素可以持有从 0(完全透明)到 255(完全不透明)的不透明度值。当平台图像引擎把 PNG 重新保存为 WebP 时,它读取每个像素的 RGBA 值,并把 alpha 值直接送入 WebP 的压缩阶段,无论 RGB 数据如何编码,alpha 都以无损压缩保留下来。结果就是 PNG 里 alpha 为 0 的每个透明像素、介于 1 到 254 之间的每个半透明像素,以及 255 的每个不透明像素,都映射到 WebP 中完全相同的状态。对于带柔和投影、或在透明背景上有抗锯齿文字的徽标来说,边缘的柔顺得以完整保留。这与 JPG 形成对比,JPG 的容器规范里没有 alpha 字段,编码前必须把图像合成到某个背景色上。
Core Web Vitals 与图片格式的取舍
Largest Contentful Paint 衡量页面上最大的可见元素出现在视口里所需的时间。对多数内容页而言,那个元素就是主图,而 Google 在其 Core Web Vitals 评估中把 LCP 用作排名信号。PNG 图片因体积而成为 LCP 失败的常见来源,一张 4K 分辨率的照片型 PNG 可能重达数兆字节,而近无损画质下的同等 WebP 通常只是其中很小一部分。PageSpeed Insights 在其「以新一代格式提供图片」的审计项里专门点出这一点,并把 PNG 列为要替换的目标格式。把出现在关键渲染路径上的 PNG 转为 WebP,是改善可量测页面性能时杠杆最高的单项改动之一。浏览器支持的时间线让这一步很安全:Chrome 在 2011 年、Firefox 在 2019 年、Safari 在 2020 年加入 WebP,Edge 则自其 Chromium 重构起便支持。
有损输出与近无损设置
保存 WebP 时可设一个从 0 到 100 的画质参数,数值越高保留的细节越多,文件也越大。本工具固定在一档近无损设置上保存,这档设置经过调校,在照片、界面图形和图标这些常见网页素材类别上,于视觉保真与文件体积之间取得平衡。在这档设置下,输出在常规屏幕观看距离上与源 PNG 在知觉上分不出来。严格说来,相对一次真正的无损保存,会损失一些位级精度,也就是把解码后的 WebP 像素与原始 PNG 像素逐字节比较时,会出现细小的数值差异,而它们都低于照片素材上人眼的知觉阈值。对于医学影像、卫星摄影或归档式数字保存这些把无损保真当作硬性要求的场合,正确做法是保留 PNG,并仅把 WebP 当作投放导出件,而非工作副本。
元数据的处理方式
用于 PNG 转 WebP 的流程会把输出里的 EXIF、IPTC 和 XMP 元数据剥除,这与三大浏览器引擎上观察到的行为一致。ICC 色彩配置文件的处理则不一致,Chrome 和 Safari 会在 WebP 输出里保留 sRGB 的 ICC 配置文件标签,而 Firefox 会把包括 ICC 配置文件在内的所有元数据都清掉。净结果是,转换后的 WebP 在各浏览器中都属于 sRGB 安全,但源 PNG 上任何广色域标记,如 Display-P3、Adobe RGB 或 ProPhoto RGB,都无法在 Firefox 中存活。对色彩敏感的专业流程来说,这种不一致很要紧,所以若最终输出需要色彩配置文件的保真,请用会明确写入 ICC 数据的工具来转换,或用专门的图片元数据编辑器在事后把配置文件标签补回去。
何时该保留 PNG,何时 WebP 已足够
实务上的决策树很短。如果图片最终的去处是网页或网页应用,且渲染环境是 2020 年以后的任意浏览器,那么 WebP 就是正确的导出格式。如果图片需要在 Figma、Sketch 或 Affinity Designer 这类设计应用里打开,请先核实你所用具体版本对 WebP 的支持,因为各版本不一。如果图片要用于印刷流程,PNG 或 TIFF 更可取,因为多数印刷 RIP 不处理 WebP。如果图片要通过电子邮件发送,PNG 更稳妥,因为邮件客户端对现代格式的支持出了名地参差。如果图片会当作工作文件被反复编辑、反复重存,请把 PNG 留作母版。近无损画质的 WebP 是出色的投放格式,而 PNG 仍是更好的归档与编辑格式。理想的工作流把 PNG 留作原件,并导出 WebP 用于网页投放。