Base64 转 WebP

把 Base64 编码的 WebP 图片保存为文件,或者把 Base64 格式的 PNG、JPEG 转换为 WebP。这种现代格式在相近画质下通常更小。

完全在浏览器中运行,不会上传任何数据。

使用方法

  1. 粘贴 Base64 字符串或 data:image/webp;base64 URI,其他图片格式同样可以。
  2. 查看预览、识别出的格式和解码后的大小。
  3. 下载格式保持为 WebP 即可转换;如果要按解码结果原样保存,请选择“原始文件”。
  4. 下载 .webp 文件,并与原图比较大小。

如何识别 WebP 数据

WebP 存放在 RIFF 容器中,WAV 音频用的也是这种封装。文件以 ASCII 文本 RIFF 开头,所以 Base64 以 UklGR 起始;几个字节之后的 WEBP 标记表明容器里装的是图片而不是声音。图片数据有三种形式:有损(VP8)、无损(VP8L),以及支持透明、动画或元数据的扩展格式(VP8X)。MIME 类型为 image/webp。

为什么要转换为 WebP

根据 Google 的测试,在画质相当的情况下,有损 WebP 比 JPEG 小约 25% 到 34%,无损 WebP 比 PNG 小约 26%。与 JPEG 不同,WebP 支持 Alpha 通道,带透明背景的 Logo 和贴纸也能顺利转换。目前所有主流浏览器都能显示 WebP。

当图片以内嵌方式使用时,体积变小会带来双重好处:图片更轻,HTML、CSS 或 JSON 中的 Base64 字符串也更短。转换完成后,可以用 WebP 转 Base64 重新编码新文件。

结果并不总是更小。很小的图标、已经充分压缩的照片以及颜色很少的扁平图形,有时反而会变大,这时 PNG 或 JPG 更合适。在修改构建流程之前,也可以先用本工具快速测试某张图片能节省多少:粘贴 Base64 格式的 PNG 或 JPEG,下载 WebP,再比较两者的大小。

用 Pillow 批量转换

如果要在服务器上批量处理,用 Python 的 Pillow 库几行代码就能完成同样的转换:

import base64, io
from PIL import Image

img = Image.open(io.BytesIO(base64.b64decode(b64_string)))
img.save('output.webp', 'WEBP', quality=80)

常见问题

WebP 能保留透明背景吗?

能。WebP 在有损和无损模式下都支持完整的 Alpha 通道,转换后透明区域依然透明。

动态 WebP 能保留动画吗?

以“原始文件”格式下载即可保留所有帧。转换需要经过画布,只能得到一帧静态画面。

转换后的 WebP 一定比原图小吗?

不一定。大尺寸照片和截图通常会变小,但很小或已经高度优化的图片可能反而变大。可以把工具显示的解码大小与下载文件的大小进行对比。

有些软件打不开 WebP 文件怎么办?

较旧的看图软件和办公软件可能不支持 WebP。粘贴同一段 Base64,改为下载 PNG 或 JPG 即可。