PNG转WebP转换器

使用方法

1. 点「选择图片」挑一张 PNG（只接受 image/png 类型）。选了 JPG 或 WebP 会被拦下并提示去对应工具页。
2. 拖「质量参数」滑杆，0.10 到 1.00 共 19 档，默认 0.80（对应 libwebp 的 -q 80）；标签上实时显示当前档位。
3. 「缩放百分比」填 25 到 100（步长 5），默认 100 表示保持原尺寸；填 50 时 1200×800 的图按 600×400 编码，像素量降到四分之一。
4. 点「转换为 WebP」；结果区给出原图字节、WebP 字节、节省百分比（可能为负，如实显示）与输出尺寸，预览图同步刷新。
5. 点「下载 WebP」保存，文件名沿用原名只换 .webp 扩展名。没有现成图片时点「载入示例图片」，Canvas 会现画一张 800×600 示例图走完整流程。

这个PNG转WebP转换器能解决什么

网站配图要压体积又想保住透明背景：PNG 的 DEFLATE 压缩对照片类内容效率很低，而 WebP 的有损模式基于 VP8 视频关键帧技术，照片类内容通常能显著缩小。本页一次转换就在本地完成，原图不离开浏览器。

调质量档不用反复猜：很多在线工具只给「高中低」三档，本页 19 档滑杆直接对应 libwebp 的 -q 值，转换后立刻报实测字节数，想找体积与画质平衡点时来回拖两下就有答案。

需要顺带缩图时不用再开一个工具：缩放与降质量两项收益相乘，50% 缩放直接把像素量砍到四分之一，比单独降质量档杠杆大得多。

本页不做的事：不输出无损 WebP（canvas.toBlob 没有对应参数，见原理一节）；不做批量队列与打包下载，多格式互转请用图片格式转换；不做压缩率优先的通用压缩（PNG、JPG 混合场景请用图片压缩）；只接受 PNG 输入，JPG 源请用JPG转WebP转换器。

原理与规则说明

PNG转WebP转换器的核心调用是 canvas.toBlob(callback, 'image/webp', q)：第二个参数固定 MIME 类型，第三个参数 q 取 0 到 1 的浮点数。在 Chromium 内核里它线性映射到 libwebp 编码器的 -q 0~100（q × 100），libwebp 手册的默认值是 75；规范没有定义省略 q 时的默认值，交给浏览器自定，所以本页把滑杆显式化，不依赖隐式默认。

这条路只能拿到有损 WebP。有损 WebP 的图像数据是 VP8 关键帧（RFC 6386），无损模式（VP8L）由命令行工具的 -lossless 开关启用，toBlob 没有对应参数——所以 q = 1 也只是有损最高档，体积约为 0.75 档的 2.1 倍，画质提升肉眼几乎不可见。这就是本页默认 0.80 而不是 1.00 的原因：网页二次编码的观感损失通常比原始素材大，多花一倍体积换不来可见收益。

透明通道是安全的：WebP 的 alpha 不走 VP8 有损路径，而是单独编码成 VP8L 平面或 ALPH 块，质量参数默认只作用于亮度与色度。PNG 的透明背景转过去后仍是透明背景；但完全透明区域里的 RGB 颜色值默认会被丢弃，半透明边缘可能有轻微色偏，对 UI 截图与线稿通常无感。

解码有双层兜底：先试 createImageBitmap(file, { imageOrientation: 'none' })，在主线程之外解码且按文件存储方向取图；不可用或抛错时回退 new Image() 加 URL.createObjectURL，两条路都失败才报错，并区分「文件不是图片」与「解码失败」两种文案。支持探测不看浏览器版本号，直接看 toBlob 回调里 blob.type 是否等于 image/webp——不支持的浏览器（如 Safari 14 及更早）会不报错地静默输出 PNG，本页检测到降级会明确告知「实际得到的是 PNG」。

转换链路：选文件 → 校验类型与体积（先查像素数、再查字节数）→ 解码得位图 → 按缩放比例画到画布 → toBlob('image/webp', q) → 读 blob.size 与 blob.type → 展示实测体积并生成下载。缩放比例作用于编码前，25% 以下的小图没有编码意义，所以下限定在 25%。

完整示例（数值仅作演示）

点「载入示例图片」后走一遍默认参数（q = 0.80、不缩放）：800×600 的示例 PNG 约 480,000 像素、RGBA 位图 1.8 MB，转换后结果区直接报实测 WebP 字节数与节省百分比——这个数字由你的浏览器现算，每台设备一致，因为编码器是同一套 libwebp。

档位对照：一张对 0.75 档出 64 KB 的图，0.40 档约 0.56 倍即 36 KB，0.95 档约 1.58 倍即 101 KB。倍数是经验曲线，只用于解释取舍形状；你的实测值以结果区为准，本页不用估算值冒充实测。

缩放示例：1200×800（960,000 像素）缩到 50% 变成 600×400（240,000 像素），WebP 体积大致降到四分之一；再叠加从 0.80 降到 0.60 档，还能再省约三成。两项收益相乘，这就是「先缩后压」比「只压」高效的原因。

负压缩示例：纯色线稿或已是 WebP 的图再转一次，结果可能比原图更大。结果区会如实显示「−X%（反而变大）」，不隐藏、不截断为 0。

输入范围与对照表

输入范围：仅 image/png 类型；文件体积上限 20 MB（20,971,520 字节）；像素数上限 40,000,000（RGBA 位图约 152.6 MB）；质量参数 0.10~1.00 步长 0.05 共 19 档；缩放 25~100 步长 5。上表的尺寸内存对照展示了两条边界落在哪：8000×6000（48,000,000 像素）起就会被拒绝。

质量档位的完整阶梯见工具区第一张表：0.10 档体积是基准的三分之一，适合带宽敏感的缩略图；0.75 是 libwebp 默认；0.80 起体积反超基准；1.00 档体积翻倍但仍是有损。CSV 导出两张表都带 BOM 头，Excel 打开中文列名不乱码。

常见输入与选择建议：UI 截图与线稿选 0.60~0.75（大块纯色对量化不敏感）；照片选 0.75~0.85；需要反复编辑的母版请保留 PNG 原件——有损 WebP 每存一次就多一代损失，不适合当工作文件。

输入范围、边界与精度说明

为什么像素上限定在 40,000,000：Chromium 单张画布约 2²⁸ = 268,435,456 像素封顶，iOS Safari 更低；16000×16000 的图理论内存就要 1 GB，页面会先崩。4000 万像素约 152.6 MB 位图，是多数设备的安全线。校验顺序是先像素数、后字节数——体积小但像素多的高压缩 PNG 同样危险，只查字节数会漏掉它。

每条非法路径都有独立文案：未选图就点转换提示「还没有选择图片」；选了 JPG 提示「请选择 PNG 图片」并指明该用哪一页；超过 20 MB 提示先压缩；解码失败会附上浏览器的原始报错；缩放填 10 或 150 提示允许 25 到 100；toBlob 返回 null 时说明浏览器不支持该 MIME，提示更换浏览器而不是静默失败。

输出体积读的是 blob.size，是编码器真实写出的字节数，不是估算值；节省百分比 = (1 − WebP 字节 / PNG 字节) × 100，保留 1 位小数，为负时原样显示。同一张图同一档位重复转换结果可能有 ±1 字节级别抖动，属编码器正常行为。

常见误用一：把 q = 1 当无损。它是有损 VP8 的最高档，需要真无损请用命令行 cwebp 的 -lossless。误用二：拿有损 WebP 反复转存（WebP→PNG→WebP），每代有损编码都会累积损失。误用三：用 text/html 思路猜测格式行为——格式判定只认 blob.type，不认文件扩展名。

常见问题

相关工具

PNG转WebP转换器只负责「PNG 进、有损 WebP 出」这一条路，同族工具各管一段。

• PNG转JPG转换器——目标是 JPG 兼容性而非体积极限，会压平透明背景。
• JPG转WebP转换器——JPG 源转 WebP 走这页，无透明通道问题。
• WebP转PNG转换器——反向转换，用于不支持 WebP 的环境回退。
• 图片压缩——PNG/JPG 混合批量的通用压缩，不指定输出格式。
• 图片格式转换——多格式互转总入口，含批量与打包下载。
• 图片尺寸调整——只缩放不改格式，与本页的缩放输入互补。
• 图片转Base64转换器——把图内联进 CSS 或 HTML 时用。