~/tutorials/base64

Base64 是什么？图片怎么转 Base64、编码串怎么解码

2026-09-25 · 约 3 分钟读完

接口要传一张图、把配置塞进 URL、从对方系统里收到一串 aGVsbG8= 看不懂——Base64 就藏在这些场景里。下面用 30 秒讲清 Base64 是什么，再给你三步把图片变成 data URI 的完整流程，全程浏览器本地完成，不上传、不注册。

Base64 是什么：一段 30 秒讲清

Base64 是一种把任意二进制数据编码成纯可见文本的方法：只用 64 个 ASCII 字符（A-Z、a-z、0-9、+、/，加 = 做补全）表示任何字节流。核心规则一句话——每 3 个字节拆成 4 个 Base64 字符，所以体积会膨胀约 1/3（24 位变 24 位，但 3 字节只能放 4 个完整符号）。反过来解码就是 4 个字符还原 3 个字节，不满足 4 的倍数时用 = 补。

hello     →  68 65 6c 6c 6f
aGVsbG8=  →  4×6bit 块拼回 5 字节（末尾用 = 补位）

为什么用 64 个字符？刚好是 2⁶，每 6 位一个符号，3 字节（24 位）切成 4 块（4×6），算起来干净利落。二进制、图片、PDF、整段密文都能塞进去，放进 JSON、URL、日志、邮件里都不炸。

常见场景：何时该用 Base64

接口内嵌图片：前端把小图标、头像直接编成 data:image/png;base64,... 塞进 HTML 或 CSS，省掉一次图片请求；大文件走接口时，请求体里的图片字段也常是 Base64 串。
邮件附件：SMTP 协议只走 7 位 ASCII，中文附件、二进制文件全靠 Base64 包一层才能发出去（MIME 的 Content-Transfer-Encoding: base64）。
存短文本到数据库 / LocalStorage：二维码载荷、小图、带换行的模板串，编码后是单行纯文本，存 SQLite / KV / LocalStorage 不挑格式。
把二进制塞进纯文本传输：JWT 的 header/payload、证书、PEM 块（-----BEGIN CERTIFICATE----- 里面）全是 Base64。

三步把图片转成 Base64

① 拖一张图进工具

把图片直接拖进本站 Base64 编解码工具的「图片转 Base64」区，或点选择文件。全程浏览器本地处理，图片不上传，断网也能用。

② 自动出 data URI

工具即时生成形如 data:image/png;base64,iVBORw0KGgo... 的串，点复制按钮整段拿走。带 MIME 类型前缀，浏览器直接认。

③ 粘进 HTML / CSS / 接口

粘进 <img src>、CSS 的 background-image，或接口请求体里的 Base64 字段。小图（<100KB）直接内嵌；大图建议先压，或改用 URL 传图片。

顺手再举个例子：普通文本编码就更快了——把 hello 贴进工具「编码」区，立刻得到 aGVsbG8=；把对方给的 aGVsbG8= 贴进「解码」区，立刻还原成 hello。中文、emoji 也支持，工具按 UTF-8 处理，不会出现乱码。

工具：yvfng.com 的 Base64 编解码，文本编码 / 解码、图片转 Base64 data URI，粘贴即用，全程浏览器本地跑，不上传、不注册。

打开 Base64 编解码接口里 Base64 字段在 JSON 里？格式化后看清

写 Base64 最常踩的 3 个坑

中文 / emoji 要用 UTF-8，不是 latin1：把「你好」按 latin1 编码，解码出来全是 ? 乱码。正确顺序：文本 → UTF-8 字节 → Base64。本站工具按 UTF-8 处理，自己写代码时 atob() 配 encodeURIComponent 或直接用 btoa(unescape(encodeURIComponent(s)))。
+ 号在 URL 里会被当空格：Base64 里的 + 放进 query string 会被解码成空格，串直接炸。要传 URL 就改用 Base64URL（+→-、/→_，去掉 =），JWT 用的就是它。
解码失败先查补全位：串尾的 = 是补全位，复制时丢了就解不动；另外确认编码端和解码端字符集一致（标准 Base64 和 Base64URL 不能混着解）。

常见问题

Base64 和 URL 编码有什么区别

Base64 把任意二进制变纯可见字符、体积约膨胀 1/3，用来把二进制塞进文本环境；URL 编码只保护 URL 里的特殊字符（空格变 %20、# 变 %23），体积增幅小得多，两个解决的是不同问题。

data URI 里 data:image/png;base64, 前缀什么意思

data: 声明这是内嵌数据不是外链；image/png 是 MIME 类型；base64 说明数据用 Base64 编码。三部分连起来，浏览器就知道后面那串是一张 PNG 图，可直接当 src 用。

Base64 能加密吗

不能。Base64 只是编码，不是加密：任何人都能一行命令解回原文。真正保密要再套一层 AES 这类加密，Base64 只负责让密文能放进 JSON、URL、日志这些文本容器。

一张 5MB 的图转 Base64 变大多少

约 6.7MB：3 字节变 4 字符，体积膨胀 4/3，再算上 data:image/png;base64, 前缀约 22 字节。这就是为什么大图不该直接塞进 HTML，接口里传图建议先压缩。