Base64 是编码,不是图片压缩
标准 Base64 每 3 个输入字节对应 4 个文本字符,准确长度是 4 × ceil(n / 3),长期体积增量约为 33.3%;Data URL 还会额外增加 MIME 前缀。
本工具先减小图片字节:解码图片,在有意义时调整尺寸、质量或格式,再重新生成标准 Base64,因此输出不需要自定义解压代码。
Gzip 会得到另一种数据
直接 Gzip Base64 会产生压缩后的二进制流,图片元素必须先解压才能读取;再把这个流 Base64 化,也不会让它变成普通图片 Data URL。
JPEG、PNG、WebP 本身已经是压缩格式。Canvas 重编码只能通过减少像素、调整有损质量、去除元数据或换格式来尝试缩小,不保证无损,也不保证一定更小。
目标体积与不增大保证
对 JPEG 和 WebP,工具会在固定次数内搜索质量;最低可用质量仍超标时,再按有界轮次缩小尺寸,并保持宽高比。
如果找不到标准 Base64 字符数真正更少的有效结果,就保留原始字节。无法完全达到目标 KB 时,会明确标注并返回更小的最接近结果。
本地处理与格式边界
图片始终留在当前浏览器标签页;不上传、不读取远程 URL、不接入遥测,也不添加第三方图片库。20 MiB 解码上限和 1600 万像素上限用于避免意外压垮标签页。
SVG、GIF、ICO 和动画 WebP 会被拒绝,既不执行也不静默取第一帧。Auto 模式保留透明通道;透明图片转 JPEG 时必须显式确认背景色。Canvas 重编码不是恶意文件扫描。
什么时候不该使用 Base64
Data URL 适合很小的自包含资源、测试 fixture 和可直接粘贴的 API 字段。大图片通常更适合 Blob URL、独立文件或二进制上传,以便单独缓存和传输。
请同时查看图片字节和 Base64 字符的前后对比。删掉 data: 前缀永远不会被算作压缩收益。
这个工具会说明的常见错误
- Base64 字符非法、padding 不可能或输入不完整。
- Data URL 声明的 MIME 与解码后的 magic bytes 不一致。
- 图片超过 20 MiB、1600 万像素,或浏览器无法解码。
- 输入是动画、多帧、SVG,或原图已经优化到无法继续缩小。
等价命令
可以在已有的运行环境或 Shell 中完成相同操作。应验证不可信输入,避免把二进制数据直接输出到终端。
Python
from PIL import Image
from io import BytesIO
import base64
image = Image.open(BytesIO(base64.b64decode(value)))
out = BytesIO(); image.save(out, 'WEBP', quality=82)
result = base64.b64encode(out.getvalue()).decode('ascii')
JavaScript
const blob = new Blob([bytes], { type: mime });
const bitmap = await createImageBitmap(blob);
ctx.drawImage(bitmap, 0, 0, width, height);
const output = await new Promise(r => canvas.toBlob(r, 'image/webp', 0.82));
bitmap.close();
Shell
printf '%s' "$VALUE" | base64 --decode > input.png
magick input.png -resize '1920x1920>' -quality 82 output.webp
base64 --wrap=0 output.webp
标准与官方参考资料
Base64 图片压缩常见问题
Base64 本身能压缩吗?
通用压缩器可以压缩这段文本,但结果会变成另一种二进制格式。要保留标准图片 Base64,应优化解码后的图片字节再编码。
结果还能直接放进 img src 吗?
可以。Raw 输出是标准 Base64,Data URL 输出是普通的 data:image/...;base64 值。
怎样把 Base64 图片压缩到 100 KB?
选择 Custom 和 100 KB。工具会有界搜索质量,再按需缩小尺寸;部分图片无法在合理格式和质量下完全达到目标。
压缩会降低画质吗?
可能会。缩放和 JPEG/WebP 质量调整是有损操作;PNG 可以保持像素无损,但重编码未必更小。
为什么 Base64 大约多 33%?
因为每 3 个字节会变成 4 个字符,准确字符数是 4 × ceil(n / 3)。
图片会被上传吗?
不会。解析、解码、Canvas、预览、复制和下载都在浏览器本地进行。
Gzip 应该放在 Base64 前还是后?
网络传输时可以按需压缩外层 HTTP 响应。Gzip 数据不先解压,就不能直接作为图片 Data URL。