什么是 Base64 图片编码？
Base64 图片编码使用 64 个可打印字符将图片文件的二进制字节转换为 ASCII 字符串。结果可直接嵌入 HTML、CSS、JavaScript、JSON 或 Markdown 中任何需要文本表示的位置，从而无需单独的图片文件或 HTTP 请求。
编码后的内容通常包装为 Data URI，格式为 data:image/png;base64,<payload>。这由 RFC 2397 定义，Base64 字母表本身则在 RFC 4648 中规范。
开发者必须了解的关键事实：Base64 编码后的图片比原始二进制文件大约 33%。这是数学上的固有属性 — 每 3 字节二进制变成 4 个 ASCII 字符。这个开销是否重要完全取决于场景，下文将逐一展开。
何时使用 Base64（何时不要）
大多数在线教程把 Base64 内联简化为"总是好"或"总是坏"。真相是看场景。以下是我们在生产代码中使用的决策矩阵：
| 场景 | 使用 Base64？ | 原因 |
|---|---|---|
| 邮件签名嵌入 logo | ✅ 必须 | 许多邮件客户端会屏蔽外部图片引用 |
| 关键 CSS 中 2 KB 以下图标 | ✅ 推荐 | 节省一次往返；收益 > 33% 体积代价 |
| 单文件 HTML demo / bug 报告 | ✅ 推荐 | 自包含、无外部依赖 |
| Service Worker / PWA 启动资源 | ✅ 有时 | 避免 SW 安装期资源竞争 |
| 单元测试 fixture | ✅ 推荐 | 测试自包含且可读 |
| CSS 或 HTML 中 > 10 KB 图片 | ❌ 反模式 | 阻塞关键渲染路径；无法独立缓存 |
| HTTP/2 环境中任何图片 | ❌ 通常不好 | HTTP/2 多路复用已消除请求开销 |
| CSS 背景中的 SVG | ❌ 反模式 | URL-encoded SVG 更小且可被 CSS 操作 |
Base64 内联用 33% 的体积增长换取一次更少的 HTTP 请求。HTTP/2 在 2015 年成为主流后，这个权衡在 ~2 KB 以上很少划算。
4 步将图片转换为 Base64
我们的免费图片转 Base64 转换器使用 FileReader API 完全在您的浏览器中运行。文件从未上传 — 您可以在工具运行时在浏览器的网络（Network）标签中亲自验证。
拖放或粘贴图片
拖放、点击浏览，或按 Ctrl/⌘+V 从剪贴板粘贴截图。
选择输出格式
在 Raw、Data URI、HTML、CSS、Markdown、JSON 或 JavaScript 字符串输出之间切换。
复制或下载
一键复制到剪贴板，或将编码文本下载为 .txt 文件。
在代码中验证
粘贴到您的 HTML、CSS 或 React 组件中。Data URL 在任何现代浏览器中原生渲染。
Base64 输出的 7 种用法
同一份 Base64 内容服务于 7 种独特的生产场景。我们工具中每个 tab 都输出对应格式的可复制片段。
邮件签名
嵌入 logo 让其在 Outlook、Gmail 和 Apple Mail 中无需外部加载即可渲染。
<img src="data:image/png;base64,iVBOR..." alt="Logo" />CSS 背景
内联 2 KB 以下的图标，从关键 CSS 中省掉一次 HTTP 往返。
background: url("data:image/svg+xml;base64,PHN2..")React 预览
在文件发送给服务器前显示上传预览。
<img src={`data:image/jpeg;base64,${b64}`} />Markdown bug 报告
用于 GitHub issue 的自包含 markdown — 不会随时间出现损坏的图片链接。
JSON API
当结构化 schema 仅允许文本字段时，将图片以 JSON 传输。
{ "image": "data:image/png;base64,..." }JavaScript 常量
将资源直接打包到构建中，实现零运行时资源拉取。
const logo = "data:image/png;base64,...";TinyImagePro vs 其他 Base64 工具
我们用过六款其他 Base64 转换器后才决定自建本工具，发现每款都有妥协 — 文件大小限制、缺少输出格式、服务端上传或零文档。竞品对比如下：
| 工具 | 客户端 | 文件上限 | 输出格式数 | 完整 FAQ |
|---|---|---|---|---|
| TinyImagePro | ✅ | 受 RAM 限制 | 7 | ✅ 8 题 |
| base64.guru | ❌ 上传 | 50 MB | 10 | ❌ |
| base64-image.de | ✅ | 1 MB | 2 | 部分 |
| browserling | ✅ | 未标 | 1 | ❌ |
| jam.dev | ✅ | 4 MB | 3 | ❌ |
| codebeautify | ✅ | 未标 | 1 | ❌ |
对于敏感内容（医疗影像、内部产品图、未发布 logo），客户端转换是唯一选项。base64.guru 的 50 MB 上限听起来不错，但如果您根本不能上传文件就毫无意义。
性能与最佳实践
"33% Base64 开销"这个数字误导的开发者比任何 web 性能数字都多。真正影响页面加载的是 gzip 或 brotli 压缩后的体积 — 而 Base64 字符串与二进制的压缩特性截然不同。
| 资源 | 原始 | Base64 | 开销 | gzip 后 |
|---|---|---|---|---|
| PNG 图标（1 KB） | 1.0 KB | 1.4 KB | +40% | +5% |
| PNG（10 KB） | 10 KB | 13.4 KB | +34% | +12% |
| JPG 照片（50 KB） | 50 KB | 66.8 KB | +34% | +30% |
| SVG（小图标） | 0.5 KB | 0.7 KB | +40% | URL-encoded SVG: −10% |
gzip 压缩显著降低了 Base64 体积惩罚。10 KB PNG 作为 Base64 时大 34%，但 gzip 后只大 12% — 这让小资源的 Base64 内联实际成本远低于表面值。
5 条最佳实践
内联 2 KB 以下的资源。超过此尺寸，bundler 膨胀和缓存失效成本超过节省的请求。
切勿内联 LCP（Largest Contentful Paint）图片。它们会阻塞关键渲染并阻止浏览器优先级排序。
对于 SVG，使用 URL-encoded SVG，不要用 Base64。URL-encoded SVG 更小且可被 CSS 操作（currentColor、动画）。
先用我们的 PNG 或 JPEG 工具压缩图片 — Base64 会继承所编码内容的体积。
如果跨域提供 Base64 资源，添加允许 data: 出现在 img-src 和 style-src 中的 Content-Security-Policy。
关于图片转 Base64 的常见问题
我的图片会上传到你们的服务器吗？ 不会。TinyImagePro 使用浏览器 FileReader API 读取每个文件并在本地处理。您可以在页面加载后断开网络，转换仍可正常工作。可在浏览器的网络（Network）标签中验证。
为什么 Base64 字符串比原图大约 33%？ Base64 将每 3 字节二进制表示为 4 个 ASCII 字符 — 数学上 33.3% 的开销，未计入换行和 data:image/...;base64, 前缀。经过 gzip 后，小资源的实际开销降至 5–15%。
可以用于 SVG 吗？ 可以，但对 SVG 应优先考虑 URL-encoded SVG — 更小且可被 CSS 样式操作。我们支持 SVG 输入便于您实验，但 PNG 转 SVG 工具 是矢量化工作流更好的入口。
如何把 Base64 解码回图片？ 将 Data URL 粘贴到浏览器地址栏 — 现代浏览器原生渲染 data:image/... URL。编程方式可用 JavaScript 的 atob() 或 Python 的 base64.b64decode()。专门的 Base64 转图片工具在我们的路线图中。