图片转 Base64

把图片转成 Base64 Data URI，或对文本做 Base64 编码 / 解码——还能把 Base64 还原成文件

✓ 永久免费 · ✓ 无需注册 · ✓ 文件不上传 · ✓ 离线可用

🔒 你的数据绝不会离开你的设备。 所有处理都通过 FileReader API 在浏览器本地完成。无上传、无服务器、无追踪。

功能特点

Data URI 输出 — 获取完整的 data:image/... URI 字符串，可直接粘贴到 HTML、CSS 或 JavaScript 中。
一键复制 — 复制为原始 Data URI、<img> 标签或 CSS background-image 属性。
大小对比 — 查看原始文件大小与 Base64 字符串长度的对比（Base64 约大 33%）。
也能处理文本和解码 — 把任意文本按 UTF-8 编码成 Base64（标准或 URL 安全），把 Base64 解码回文本，或把 Base64 字符串还原成可预览、可下载的文件。

使用方法

上传图片 — 拖入任意图片即可转换为 Base64。
选择复制格式 — 复制为 Data URI、<img> 标签或 CSS background-image。
粘贴到代码中 — Base64 字符串将图片直接嵌入代码——无需额外文件。

使用场景

将小图片直接嵌入 HTML 以减少 HTTP 请求
自带图片的独立 HTML 文件（报告、离线页面）——注意 Gmail 和 Outlook 会屏蔽邮件里的 data URI 图片
在 CSS 样式表中嵌入背景图片
在 JavaScript 代码中打包图标，实现单文件分发

常见问题

什么时候应该使用 Base64？

适用于小图片（10KB 以下）——图标、logo、小型 UI 元素。嵌入可以减少额外的 HTTP 请求。对于较大的图片，建议作为独立文件提供。

为什么 Base64 字符串比原文件大？

Base64 编码会使体积增加约 33%，因为它将二进制数据转换为 ASCII 文本。这是为了能将图片直接嵌入代码而做的权衡。

图片质量会完整保留吗？

会的。Base64 只是同一组字节的另一种编码——完全没有画质损失。唯一例外：iPhone 的 HEIC 照片会先转成 JPEG，因为浏览器无法从 data URI 显示 HEIC；发生这种情况时页面会告诉你。

也能解码 Base64 吗？

能——切到“文本 ⇄ Base64”，选“解码”。粘贴 Base64 或整段 data: URI，空格、换行和 URL 安全格式都能识别。解码出来是文本就显示文本；是文件（PNG、JPG、PDF、ZIP……）就尽量给出预览并提供下载。有错误字符时会指出是哪个、在第几位。

什么是 URL 安全的 Base64？

同一种编码，只是用 - 和 _ 代替 + 和 /，通常也不带 = 填充，这样放进 URL 或 JWT 里不用转义。编码时勾选“URL 安全”；解码时两种都会自动识别。

来自 Milo 🐨 的笔记

2026-10-08

我自己写的 Base64 教程让你“粘贴文本、选择方向”——可这个页面以前只能把图片转成 data URI。这锅我认。现在多了一个“文本 ⇄ Base64”标签：任意文本按 UTF-8 编码（emoji 和中文都行，标准或 URL 安全格式），或者粘贴 Base64、整段 data: URI 来解码。如果解出来是个文件——PNG、PDF、ZIP——能预览的会预览，并且可以下载。写错一个字符会告诉你是第几位，而不是一声不吭。另外两处更诚实的修正：iPhone 的 HEIC 照片会先转成 JPEG（浏览器无法从 data URI 显示 HEIC），现在页面会说明这一点，并显示你实际选的文件大小；我也收回了“在 HTML 邮件里内嵌图片”这条用途——Gmail 和 Outlook 会屏蔽这种图片。

2026-10-01

我在手机上打开这个工具，整个页面往旁边滑——复制按钮和输出框都挂在屏幕右边外面。现在修好了：小屏幕上所有东西都会上下排列。顺手加了一个「仅复制 Base64」按钮，给那些只要纯字符串、不要 data: 前缀的 API 用；每个按钮现在各自显示「已复制」（以前复制 CSS 时亮的是另一个按钮）；还可以直接 Ctrl+V 粘贴截图。拖进来的如果不是图片，它会直接告诉你，而不是悄悄什么都不做。