PNG 转 WebP v1.0

把一张 306 KB 的透明 PNG 放进 DocPivot 的 PNG 转 WebP 转换器，默认档输出 48 KB，透明通道完好，体积只剩原来的六分之一。这是 WebP 相对 PNG 最直接的价值：同一幅画面，网页少传几百 KB。这个转换器还提供一个多数同类工具没有的“原图”档，走 libwebp 真正的无损编码，输出与源文件逐像素一致，专门给 logo、UI 图标这类“接近相同”不够用的素材使用。全部计算在浏览器里完成，一次最多 30 个文件，不上传、不排队、没有每日次数上限。

PNG 转 WebP 能省多少体积：一组实测数字

同一张带透明背景的 306 KB 测试图，默认的“高质量”档输出 48,252 字节，比原文件小 84%。切换到“原图”档，输出 69,346 字节，仍然比源 PNG 小 77%，而且逐像素与源文件相同。这两个数字说明了一件常被忽略的事：WebP 的无损模式本身就比 PNG 的 Deflate 压缩更高效，即使一个像素都不改，体积也会明显下降。

换算到实际带宽上，一张首屏插图省下 258 KB，日均一万次访问就是每天 2.5 GB 流量。如果站点里还有大量位图素材没有整理，可以先用图片压缩工具做一轮体积排查，再决定哪些文件值得换成 WebP。需要把已有的 WebP 还原成 PNG 时，WebP 转 PNG 工具可以反向处理。

“无损”这个词在转换器里被用坏了

市面上多数免费 PNG 转 WebP 工具把质量参数拉到 100，然后在界面上标成“最佳质量”甚至直接写“无损”，但那仍然是有损编码。WebP 的有损路径会把图像转到 YUV 色彩空间再做预测编码，即使质量 100，像素值也和源文件对不上，边缘会有极轻微的色彩偏移。文字、细线条、纯色块拼接的图标最容易看出这种偏移。

WebP 规范里真正的无损模式是另一条编码路径（VP8L），它不做色彩空间转换，用调色板、颜色缓存和空间预测把数据原样压回去。DocPivot 把“原图”档直接接到 libwebp 的无损模式上，输出可以用像素比对脚本逐点校验，结果是完全一致，而不是“看不出差别”。做反向验证也很方便：把生成的 WebP 再转回 PNG，两个 PNG 的哈希值应当相同。如果手上是照片素材而不是图形素材，JPG 转 WebP 工具更合适，因为 JPEG 源本身已经有损，再走无损只会让文件变大。

半透明像素下面的颜色，决定了无损文件的大小

透明 PNG 转 WebP 时，无损文件的体积很大程度上取决于读取像素的方式。浏览器的 2D 画布在读回像素数据时会返回预乘 alpha 的结果，半透明区域下方的 RGB 值被反复量化，变成一层肉眼看不见的噪点。看不见是因为它被 alpha 遮住了，但无损编码器不管这些，它必须把每一个字节原样存进文件。

同一张测试图，走画布路径的无损结果是 177,976 字节，走 WebGL2 读回路径的结果是 69,346 字节，相差 2.6 倍。DocPivot 对含透明通道的源文件默认走 WebGL2 读回，拿到未经预乘的原始像素，所以半透明羽化边、投影、玻璃质感这类素材在无损档下不会莫名其妙地膨胀。矢量素材没有这个问题，需要先栅格化的话可以用SVG 转 PNG 工具生成中间文件。

四档质量设置分别做了什么

四个选项对应两条完全不同的编码路径，不是同一条曲线上的四个刻度。选错的代价通常是文件白白大一倍，或者图标边缘出现不该有的杂色。

三档有损模式都启用了锐化 YUV 处理，对 PNG 里常见的硬边缘有实际帮助——直角、描边、像素字这些区域在普通有损编码下最容易发糊。如果目标是更激进的压缩率，可以再往下走一代格式，PNG 转 AVIF 工具在同等观感下通常还能再小一截，代价是老设备的兼容性更差。已经生成 WebP 之后想横向比对，WebP 转 AVIF 工具可以直接转出对照文件。

DocPivot PNG 转 WebP 的使用方法

1. 把 PNG 文件拖进上传区，或点击选择文件，一次最多 30 个。
2. 选择质量档位：图形素材选“原图”，网页配图保持默认的“高质量”。
3. 需要控制尺寸时，选择 2048 px 或 1200 px 最长边限制；这是只缩不放的规则，源图本来就小于目标值时不会被拉伸。
4. 有明确体积要求时，打开“限制在指定体积以内”并填入上限，转换器会自动寻找能满足这个上限的最高质量。
5. 点击转换，等待结果卡片显示尺寸、体积和压缩比例。
6. 单个文件保留原文件名下载，多个文件打包成 ZIP。

整个流程不需要注册，也不需要安装桌面软件。如果手上的素材格式比较杂，混着 BMP、TIFF、ICO 之类的老格式，可以先用图片格式转换工具统一成 PNG 再批量处理。

尺寸控制与“限制在指定体积以内”

体积上限功能不是靠经验猜一个质量值，而是做真实的二分搜索。填入上限后，转换器在质量 5 到 95 之间最多做 8 次试编码，每次都真的调用编码器算出文件大小，最后保留满足上限的最高质量结果。这和“质量固定 70，大了就随缘”的做法有本质区别，尤其是当同一批图片的复杂度差异很大时——纯色图标和满屏渐变的插图需要的质量值完全不同。

尺寸限制则是纯粹的只缩不放：选 2048 px 时，一张 1200 px 宽的图不会被放大到 2048 px，因为放大只会凭空增加体积而不增加信息。需要按具体像素值精确控制长宽，用图片尺寸调整工具更合适；只想保留画面的一部分，则先用图片裁剪工具把多余区域去掉，再来转换格式，省下的体积往往比调质量更多。

浏览器本地处理与数据合规

所有编码都在你自己的设备上完成，文件不会离开浏览器。技术实现是 createImageBitmap 加 WebGL2 读回负责解码，编译成 wasm 的 libwebp 负责编码，页面不向任何服务器发送图像数据，也没有排队和每日额度的概念。

这一点在国内的实际工作里越来越重要。《个人信息保护法》和《数据安全法》对企业处理数据的方式提出了明确要求，把未发布的产品图、含客户信息的界面截图、内部系统的设计稿上传到第三方转换网站，本身就是一次对外提供数据的行为，很多公司的合规流程并不允许这么做。DocPivot 的处理方式绕开了这个问题：没有上传，就没有需要说明去向的数据。图片里的隐性信息同样值得检查，用EXIF 信息查看工具可以先看看源文件带了哪些拍摄参数和位置数据，确认需要清理时再用图片元数据清除工具处理。

能力边界与已知限制

这些是转换器做不到或者需要权衡的地方，写在前面比让你转完才发现要好。

• 无损档是最大的档位。测试图上原图档 69 KB，高质量档 48 KB。要像素级一致，就得接受更大的文件，这条路没有捷径。
• 有损档确实是有损的。高质量档在观感上非常接近，但不等于相同。需要归档、需要二次编辑、需要做像素比对的素材，别用有损档。
• 动态 PNG（APNG）不保留动画。转换器只取第一帧，结果卡片会明确标注这一点。需要动画素材请改用GIF 转 WebP 工具。
• 不携带 ICC 色彩配置和 EXIF 信息。带色彩标签的源文件会按 sRGB 输出。对网页素材来说这通常是想要的结果，对印刷或专业修图流程则不是。
• 像素精确路径依赖 WebGL2。浏览器不支持时转换器仍能工作，回退到画布路径，只是无损文件会比理想值大一些。
• 它是格式转换工具，不是编辑器。裁剪、旋转、调色这些操作需要在转换前完成，转换环节只负责编码。

什么场景该换成 WebP，什么场景先别换

WebP 已经是自建站和 H5 页面的默认选择，但国内几个高频渠道有各自的脾气，换之前值得先确认。

• 自建站与独立站：放心换。主流浏览器全部支持，首屏图片体积下降对 LCP 指标是直接收益。
• 微信小程序：安卓端原生支持，iOS 14 以下的机型需要在 image 组件上显式配置 webp 属性才能正常显示，老机型占比高的项目要做兜底。
• 微信公众号后台：排版时上传的图片仍需 PNG 或 JPG，后台自己会做格式转换，直接传 WebP 会被拒。
• 电商平台主图：淘宝、京东、拼多多的商品主图和详情图上传接口普遍只接受 JPG 与 PNG，WebP 适合用在自有 CDN 和店铺自定义页面上。
• 需要交给客户或印刷厂的文件：保持 PNG 或 TIFF，别转。真要交付 WebP，用WebP 转 JPG 工具再准备一份通用格式一起给。
• 网站图标：浏览器标签页图标走的是另一套规则，用Favicon 生成工具直接产出 ICO 与多尺寸 PNG 更省事。

实际应用场景

独立站首屏加载优化

背景：一个做户外装备的跨境独立站，首页六张 PNG 主视觉合计 2.1 MB，移动端 LCP 长期在 4 秒以上。

操作：六张图批量拖入，保持默认高质量档，同时开启 2048 px 最长边限制。

结果：合计输出 340 KB，首屏图片体积下降 84%，移动端 LCP 降到 2.1 秒。运营同学后续把详情页的 HEIC 转 WebP 工具也加进了素材流程，因为拍摄组交过来的原片默认是 HEIC。

小程序包体与图片资源

背景：一个本地生活服务小程序主包接近 2 MB 上限，其中静态图标和引导图占了 700 KB。

操作：纯图形素材统一走“原图”档保证无损，引导插图走高质量档，全部限制在 1200 px 以内。

结果：图片资源压到 210 KB，主包腾出空间。iOS 14 以下的兼容处理通过在 image 组件上配置 webp 属性解决。

设计交付：logo 与界面图标

背景：设计团队向前端交付一套 48 个 UI 图标，带半透明投影，甲方明确要求交付文件与设计稿像素一致。

操作：分两批各 24 个文件，全部选“原图”档，不做尺寸限制。

结果：平均单个文件从 41 KB 降到 12 KB，前端做像素比对全部通过。给图标加统一角标时，团队用图片水印工具先处理再转换。

电商详情页与 CDN 流量成本

背景：一家有赞店铺的自定义详情页每月 CDN 流量费约 ¥1,800，图片占了九成。

操作：把三十多张长图先用图片分割工具切成加载友好的分段，再批量转 WebP，用“限制在 200 KB 以内”统一控制单张体积。

结果：月流量费降到 ¥520，页面滚动加载明显更顺。

内部素材不外传

背景：一家医疗器械公司的市场部需要压缩产品渲染图，但产品尚未发布，公司安全规范禁止上传到外部网站。

操作：断网状态下打开页面完成全部转换，验证确实不依赖网络请求。

结果：28 张渲染图在本地完成转换，平均体积下降 79%，走完合规审批不需要额外的数据出境说明。

常见问题