如何将 PNG 转为 WebP
整个过程不需要你按任何「转换」键：文件刚一拽进放置区，或经由浏览选中，活儿就自顾自开跑了，日常尺寸的图片往往一秒不到便了结。完事后，「下载」会沿用源文件名、只换上新后缀，把 WebP 落到盘里。手机也好桌面也好，走的是同一条路径，装都不用装。转换一张在你的浏览器里跑，交几张则一起上传到我们的服务器。想再来一张？接着往里放下一张 PNG 即可。需要留意动态 PNG：递进去只有头一帧会留下，这里产出的 WebP 是一张静止图，不是一段动画。
PNG 转 WebP，更轻巧又保留透明度的文件
把笨重的 PNG 换成一份精简的 WebP，它保留透明度，加载也更快。
正在加载您的文件…
或将图片拖放到此处
转换中…
0%
正在转换您的图片
这可能需要一分钟左右——多个文件会稍久一些。请保持此标签页打开。
图片已转换为 WebP
快速答案
Araluma 把 PNG 变成 WebP，保留透明的部分。交一张图片，浏览器的图像引擎会在你自己的设备上重建它，所以它不会被发到任何地方。一次交几张，它们会前往我们的服务器，一起逐个处理并返回一个下载，然后在约 2 小时内清掉那个下载。PNG 透明的地方，WebP 也保持透明，因为 WebP 带有完整的 alpha 通道，正因如此，当你想要更轻的文件又不压平抠图时它胜过 JPG。按 Google 自己的 WebP 数据，无损 WebP 比同等 PNG 低约 26%，带 alpha 的有损 WebP 接近三分之一大小。这里出来的是接近无损设置的有损 WebP，用一丝位级细节换取更小的文件，同时在正常屏幕尺寸下看起来和源 PNG 一样。对于像素级存档副本，请留着原始 PNG。
透明像素原样进入 WebP
先看结论：你 PNG 上凡是透明的地方，到了 WebP 仍旧透明，靠的是它内里那条 8 位的 alpha 通道。也正因如此，事后没有谁会变白，抠图四周不会浮起一圈边晕，编辑器里也没有什么要补的。把它和 JPG 摆在一起就更清楚了，JPG 压根没有 alpha，遇上清透的像素只能拿一种实色去顶，而 WebP 原样收下。于是徽标、图标、产品抠图、界面草模、带圆角的截图，乃至任何靠透明背景立身的画面，都整个儿过去了。这事不靠你拨什么开关，它自动成立，毕竟揣着 alpha 本就是 WebP 的天职。
从 PNG 换到 WebP 的理由
先说浏览器这关：Chrome、Firefox、Safari 与 Edge 早已原生地认得 WebP，所以「能不能显示」根本不是问题。真正打动人的是体积。Google 官方公布的数据里，无损那一版大约比同等 PNG 轻百分之二十六，而带着 alpha 的有损版本贴到了可比 PNG 三分之一上下。文件一旦变轻，首屏那张最大的图就到得早，这恰恰是 Largest Contentful Paint 在意的事，而它正是 Google 拿来排座次的 Core Web Vitals 指标之一。难怪 PageSpeed Insights 会在「换用新一代格式」那一条里，把 PNG 单拎出来念名字，你改投 WebP，这条提示也就随之熄灭了。
画质设置与有损取舍
得先把丑话讲在前头：这档 WebP 在技术分类上确实算有损，相对一份分毫不差的无损副本，它交出了一点点位级精度。但 Araluma 把画质钉在一个同时照顾照片与图形的「近无损」点位上，寻常观看尺寸下，它和那张 PNG 看着就是一回事。日常那些徽标、图标、界面素材乃至照片，那点差别根本浮不出水面。要换算成好处：照片大多能瘦下去百分之五十到七十，而这还是叠在 WebP 本就压 PNG 一头的结构优势之上。唯独碰上医学扫描、归档母版这类要抠到像素的活儿，才该把 PNG 留作底子，让 WebP 当导出件。
PNG 实际在哪里被转换
这取决于你交多少张。转换单张 PNG，整个任务都发生在标签页里，在浏览器自己的图像引擎上，在你的设备上，没有任何东西上传，也没有任何关于文件的记录。自己验证，打开 DevTools，在转换那一张时让网络面板开着，数一数携带它的出站请求为零。一次转换一把，它们会上传到我们的服务器，逐个处理并返回一个下载。那个下载会在约 2 小时内从我们的服务器清掉，你也可以在保存的那一刻删除。这样一张图片永不离开浏览器，而一批只在拼出你带走之物所需的时间里停留在我们的服务器上。
原始 PNG 仍是正确选择的时候
话要说回来，WebP 走得远归走得远，却并非处处通行。印刷管线大多把它撇在一边，少数设计程序、内部内容系统至今仍只认 PNG，某些操作系统拖放 PNG 顺手得很、对 WebP 却伸手要插件。还有一类情形要当心：那种要在桌面应用里反复开、反复改的工作文件，一轮轮解码再重建会把损耗攒起来，把无损 PNG 留作母版才稳妥。所以合理的分工是 PNG 当源头、WebP 作面向网页的导出件。哪天要倒着走、把 WebP 还原成 PNG，交给 webp-to-png 工具就是。
工作原理
-
交出一张 PNG
把 PNG 滑到页面上，或在选择器里找它。透明的部分一同前来。转换一张，它留在你的机器上，放入多张，它们会上传到我们的服务器一起处理。
-
往后一靠
你不必再做什么。一张寻常图片变成 WebP,差不多就和你手指抬起一样快,中途既没有「转换」这一步,也没有一个转圈的等待图标。
-
看它缩下去
结果会报出它出来多大。清透的地方仍旧清透,而 WebP 理应看上去比你起头那张 PNG 轻。
-
留住你的 WebP
在下载上轻点一下就把它写出来,旧名字,崭新的 .webp 后缀。还有一排在等?把每一张都丢到页面上,它们便一张接一张地过去。
常见问题
把 PNG 转成 WebP 时透明度会保留吗?
一句话，留得住。看 JPG 就懂了：它身上没有 alpha，遇着清透的像素只好抹一层实色顶上。WebP 不然，它揣着一整条 alpha 通道，把你抠好的形状照单全收，原来透到哪，转完还透到哪。所以打透明 PNG 起手，目标格式认 WebP 准没错。徽标也罢、图标产品照也罢、搁在透明底上的界面零件也罢，过一遍转换全须全尾，半个多余步骤都不劳你。
为什么要把 PNG 转成 WebP?
图越瘦、到得越早，而 Largest Contentful Paint 量的正是首屏那张大图来得快不快，Google 又把它记进排名。所以换 WebP 划算：照 Google 的数字，无损版比同等 PNG 轻约百分之二十六，带 alpha 的有损版能瘦到某一者三分之一上下，透明度与模样却都还在。PageSpeed Insights 也在图片审计里把 PNG 标成新一代格式的机会。至于显示，从 Chrome、Firefox 到 Safari、Edge，全都不用搭把手就读得了 WebP。
把 PNG 转成 WebP 会损失画质吗?
掰成两面讲。明面上，Araluma 这档近无损，照片图形在寻常尺寸下跟源 PNG 一个模子，日常网页里你根本挑不出毛病。暗面上，它技术分类归有损，拿一星点位级精度换了更小的体量，这点也就抠像素或做归档时才值得计较，那种场合就该把 PNG 留底、WebP 充交付。还有一句要紧的：整个转换碰都不碰你的源 PNG，它原模原样躺在你设备里。
WebP 比 PNG 小多少?
要看图里装的是什么。清透片区大、实色块多的图形捞得最狠，又忙又细的照片省得少些、却也实打实。具体到数：照 Google 官方的 WebP 文档，无损版约在同等 PNG 之下百分之二十六，带 alpha 的有损版落在可比者三分之一附近。横竖一句，WebP 出来更轻，透明度还在。
在这里把 PNG 转成 WebP 安全吗?
这取决于你转换一张还是多张。单张 PNG 直接在浏览器里重建，所以那个文件不会被发送，你可以打开 DevTools，在转换中途查看网络面板来验证，那里不会出现任何出站图像请求。一次转换多张，它们会上传到我们的服务器一起处理，那个下载会在约 2 小时内清掉，保存后你也能自己移除。无论哪种方式，除了拼出你的下载之外，你图片的任何内容都不会留下。
WebP 在所有浏览器里都能用吗?
能用,就一切实际用途而言。一旦 Safari 14 于 2020 年发布,原生的读取便处处抵达,与 Chrome、Edge、Firefox 会合,而它们合起来几乎构成了人们当真在跑的每一个浏览器。例外的是那些真正老旧的,以及一些内嵌网页视图,对于可能含有它们的受众,PNG 仍是审慎的一手。任何用着过去五年内浏览器的人,都能毫不费力地拿到 WebP。要是你想坐实某个具体情形,caniuse.com 上的 WebP 条目把支持铺得明明白白。
详细信息
团队关于工艺、格式以及一个好的圆形裁剪背后小决定的笔记。
WebP 为何能比 PNG 更小
说穿了就是它有两套压缩本事，PNG 那套 DEFLATE 只占其一。第一套讲求分毫不丢，把空间与色彩的预测，搭到一个比 DEFLATE 更精的熵环节上，Google 给出的数字是寻常图片多省两成六上下。第二套敢于舍弃，借了视频那一行的分块变换，专把人眼几乎抓不住的那些去掉。妙处全在透明这一层：碰上 alpha，它另起一条道把 alpha 分毫不丢地收着，RGB 那头才放手去舍，同等观感下，带透明的它便能压到 PNG 三成上下。DEFLATE 死守不丢一字，那笔知觉上的便宜自然轮不到它，体积这道沟，就从这分岔来。
细说 alpha 通道
把刻度摊开看：一个像素的不透明度，从 0 的彻底清透一直数到 255 的彻底实心，PNG 和 WebP 都用 8 位去记。重建时，平台图像引擎逐像素读出 RGBA，单把 alpha 那一路笔直送进 WebP 的压缩环节，无论 RGB 怎么处理，alpha 始终摆在无损压缩底下。于是 0 处的全透、1 到 254 之间的半透、255 处的全实，到了 WebP 里一个不差地各归各位。落到一枚带柔影、或在清透底上印着抗锯齿字的徽标上，边缘那份娇气的过渡完整搭车过去。JPG 偏偏做不到，它容器里就没有 alpha 这一栏，动手编码前先得把图压到某个背景色上。
Core Web Vitals 与图片格式的取舍
先把数字摆上：4K 的照片型 PNG 张口就是好几兆，同一张换近无损 WebP，常常只剩个零头。这分量正是麻烦所在，LCP 掐的是页面里最大那个可见物冒头进视口要多久，内容页里多半就是主图，Google 又拿它当 Core Web Vitals 的排名凭据，PNG 于是成了拖后腿的惯犯，PageSpeed Insights 也在新一代格式那栏径直把它点出来。把堵在关键渲染道上的 PNG 翻成 WebP，论实测提速，是性价比顶高的一手。年表也叫人安心：Chrome 是 2011，Firefox 2019，Safari 2020，Edge 则自改投 Chromium 那天起便认。
有损输出与接近无损设置
它给了你一个 0 到 100 的画质挡，越往上细节留得越足、字节也越胖。Araluma 索性把这挡锁死在一个近无损的位置，这位置是冲着照片、界面图形、图标这一票常见网页素材，把忠实和体量两头掂量出来的。锁在此处，常规屏距底下，出来的东西跟源 PNG 真假难辨。硬要较真：比起一回十足的无损编码，确会漏掉一星半点位级精度，逐字节比解码后的 WebP 跟原 PNG，会蹦出些极小的数值缝，可全数压在照片人眼门槛底下。也就医学扫描、卫星影像、归档存底这类把无损当铁律的场合，才该留 PNG、把 WebP 纯当交付件，别拿它当工作底。
元数据的处理方式
转换时被一并扫掉的，是 EXIF、IPTC、XMP 这一类随图携带的字段，三家引擎在这点上口径一致。真正闹分歧的是怎么对待 sRGB 标签：Safari 跟 Chrome 愿意把它留在成品上，Firefox 偏要把 ICC 配置文件连根带走。结果便是成品到哪都吃得开 sRGB，可一旦源图挂着 Display-P3、Adobe RGB 或 ProPhoto RGB 这种广色域标记，让 Firefox 经手就荡然无存。这点在讲究颜色的专业流程里是会出岔子的：想叫色彩忠实跟着走，要么挑个会主动落 ICC 的转换器，要么收尾时另找趁手的元数据工具，把那枚配置文件标签补回原位。
何时该留住 PNG,何时 WebP 就够了
拿落点一卡便知。终点是网页或网页应用、看客又是 2020 以后的浏览器，WebP 这件导出选对了。要塞进 Figma、Sketch、Affinity Designer 这些设计软件，先验你手上那个版本认不认，各版本脾气不一。奔印刷的，押 PNG 或 TIFF，印刷 RIP 多半把 WebP 当空气。走邮件的，PNG 保险，邮件客户端见了现代格式素来翻脸。它要是张得反复改、反复存的工作文件，PNG 留母版。归根结底，近无损 WebP 当交付一流，归档跟编辑这头还得 PNG 顺手，干干净净一句话，PNG 守原件，WebP 上网页。