图片转 Base64 转换工具

什么是 Base64 图片（Data URI）？

<!-- The same 1×1 transparent PNG, four ways -->

<!-- HTML -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" alt="pixel">

/* CSS */
.badge {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==");
}

<!-- Markdown -->
![pixel](data:image/png;base64,iVBORw0KGgo…)

// JSON
{ "mime": "image/png", "data": "iVBORw0KGgo…" }

核心功能

示例

transparent-1x1.png （一张 68 字节的 PNG）

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

icon.svg

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…" alt="icon">

photo.jpg （12 KB）

![photo](data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ…)

如何将图片转换为 Base64

1. 1

   添加你的图片

   把图片拖到拖放区、点击浏览文件，或用 Ctrl+V / Cmd+V 从剪贴板粘贴。PNG、JPG、GIF、WebP、SVG、ICO 和 BMP 均受支持，并完全在你的浏览器中完成编码。

2. 2

   选择输出格式

   从标签页中选择 Data URI、原始 Base64、HTML 、CSS 背景、Markdown 或 JSON。查看元数据栏了解体积增幅，查看建议徽标判断内联是否值得。

3. 3

   复制或下载

   点击「复制」获取代码片段，或点击「下载」将其保存为文件。要反向操作，切换到 Base64 → 图片标签页，粘贴一段字符串并下载重建后的图片。

常见误区

data:base64,iVBORw0KGgo…
<!-- no MIME type — will not render -->

data:image/png;base64,iVBORw0KGgo…
<!-- correct: image/png -->

data:image/png;base64,iVBORw0KGgoAAAANS
UhEUgAAAAEAAAABCAYAAAA…
<!-- embedded newline breaks the attribute -->

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAA…
<!-- single unbroken line -->

…WjR9awAAAABJRU5ErkJggg
<!-- missing trailing == -->

…WjR9awAAAABJRU5ErkJggg==
<!-- complete with padding -->

/* 380 KB hero photo inlined into a global stylesheet */
.hero { background-image: url("data:image/jpeg;base64,/9j/…(½ MB of text)…"); }

/* Serve it as a cached file instead */
.hero { background-image: url("/img/hero.jpg"); }

常见使用场景

在 CSS 中内联 Logo 或图标

拖入一个小 PNG 或 SVG 图标，复制 CSS background-image 代码片段，粘贴进你的样式表，即可为一个很少变化的资源省去一次 HTTP 请求。保持在约 2 KB 以下（注意绿色徽标），让样式表保持精简。

在 HTML 邮件中嵌入图片

邮件客户端常常拦截远程图片。把你的 Logo 编码为 data URI，并将 元素粘贴进模板，让它无需服务器请求就能渲染。要在各客户端测试——只嵌入小图标，而非照片。

自包含的 Markdown 和 README

当你无法托管图片时——GitHub issue、notebook、离线文档——Markdown 输出会把图片直接嵌入文件，使其随文本一同传递。非常适合小图表和徽章。

JSON 或 API 载荷中的图片

需要在 JSON 文档或配置文件中传递一张缩略图？JSON 输出给你一个 { mime, data } 对象，可直接放入，而解码器会在另一端恢复出图片。

快速调试 data URI

在样式表或 API 响应中发现了一个神秘的 data: URI？把它粘贴进 Base64 → 图片标签页，看看它究竟是什么、读出它的真实尺寸，并把它作为普通文件下载以便仔细查看。

单文件小部件和书签脚本

书签脚本和可嵌入的小部件必须自包含、零外部依赖。把它们的图标内联为 Base64，可以让一切都待在一个文件里，无论被放到哪里都能正常工作。

技术细节

Base64 编码的工作原理

Base64 每次取图片二进制流的 3 个字节（24 位），将其拆成四组各 6 位，每组映射到 64 符号字母表中的一个字符。当输入长度不是 3 的倍数时，用一或两个 = 填充字符标记余数。这一 3 比 4 的比例正是编码后文本比源大约大 33% 的原因。工具直接根据字符串长度和填充计算出解码后的字节长度，因此它报告的大小数字是精确的，而非估算。

MIME 检测与魔数字节

当你编码一个文件时，它的 MIME 类型来自浏览器的 File 对象。当你解码一段不带 data: 前缀的原始 Base64 时，工具会检查开头字符，它们对应图片的魔数字节：PNG 是 iVBORw0KGgo，JPEG 是 /9j/，GIF 是 R0lGOD，WebP 是 UklGR，SVG 是 PHN2Zy 或 PD94bWw。这让解码器即使在输入只是裸载荷时，也能重建正确的 data URI 并以正确的文件扩展名下载。

仅本地处理

编码使用 FileReader API 的 readAsDataURL，它返回一个完全在浏览器中合成的 data URI。供下载的解码使用 atob 加 Uint8Array 重建二进制，再用 Blob 和对象 URL——同样不涉及任何网络。其结果是一个你可以离线运行、可放心处理机密图片的工具，因为字节绝不离开页面。你可以在浏览器开发者工具中验证这种零请求行为。

最佳实践

只内联小而稳定的资源

Base64 的最佳区间是约 2 KB 以下、很少变化且只出现在少数页面的资源——图标、小 Logo、UI 雪碧图。约 10 KB 以上时，体积代价和失去的缓存就超过了省下的请求，尤其在 HTTP/2 已让额外请求变得廉价的今天。让建议徽标指引你，把照片和大图作为普通可缓存文件提供。

SVG 优先用 URL 编码

SVG 是文本，所以 Base64 会让它膨胀且毫无收益。在 CSS 或 HTML 中内联 SVG 时，请改为对标记做 URL 编码——它通常更小、保持人类可读，并且对 gzip/brotli 压缩更友好。把 Base64 SVG 留给特别需要它的流程。我们的 URL 编码/解码工具 可处理百分号编码。

始终设置正确的 MIME 类型

data URI 只有在其 MIME 类型与内容匹配时才会渲染：image/png、image/jpeg、image/gif、image/webp、image/svg+xml。类型写错或缺失是嵌入图片无法显示的头号原因。从本工具复制时，类型会为你设好；如果你手动拼接 URI，请仔细核对前缀。

先压缩再编码

由于 Base64 会在文件大小之上再加约 33%，先缩小源文件能让你获益两次。在编码前，把图片过一遍我们的 图片压缩工具——或以正确尺寸导出——让生成的 data URI 尽可能小。一张 4 KB 的压缩 PNG，无论作为文件还是内联，都胜过 40 KB 的原图。

切勿依赖 Base64 来保护隐私

Base64 可被轻易逆向，不提供任何保护。不要用它来遮掩敏感图片内容——任何人都能瞬间解码，包括用本页的标签页。如果内容必须受保护，请在服务器端使用真正的访问控制和加密，并通过经过认证的端点提供图片。

常见问题

这个图片转 Base64 工具的作用是什么？

它会读取你拖入、粘贴或选择的图片，并将其字节编码为 Base64 字符串——整个过程完全在你的浏览器中完成。你会得到原始 Base64、可直接使用的 data URI（data:image/png;base64,…），以及可复制粘贴的 HTML 、CSS background-image、Markdown 和 JSON 代码片段。元数据栏会报告原始文件大小、编码后大小、精确的体积增加百分比（Base64 约大 33%）、像素尺寸和 MIME 类型。没有任何内容被上传：编码通过 FileReader API 在本地完成，因此该工具同样适合处理截图、内部资源和未发布的设计稿。要进行反向操作，请使用 Base64 → 图片标签页，或我们的 Base64 转图片解码器。

我的图片会被上传到服务器吗？

不会。每一步都在浏览器本地完成，使用 FileReader API 和 JavaScript 字符串编码。你的图片绝不会被传输、存储或记录。你可以打开浏览器的「网络」标签页验证——编码一张图片会触发零次网络请求。这使该工具可安全用于敏感素材：发布前的产品截图、内部图表、客户资源以及任何受 NDA 约束的内容。这里没有上传限制带来的文件大小上限，只有浏览器和目标系统能舒适处理的 Base64 字符串长度这一实际限制。

Base64 会让图片大多少？

Base64 将每 3 个字节的二进制数据编码为 4 个 ASCII 字符，因此编码后的字符串比原始文件大约大 33%（再加上少量填充字节和 data: 前缀）。一张 9 KB 的 PNG 会变成约 12 KB 的文本。这一开销是不应对大图使用 Base64 的最重要原因：你会传输更多字节，而且由于字符串嵌入在 HTML 或 CSS 中，每当包含它的文件变化时这些字节都会被重新下载，且无法被单独缓存。工具会在元数据栏显示你具体文件的精确增幅，让你用真实数字做决定。

什么时候该用 Base64 图片而不是普通文件？

Base64（作为 data URI）适合那些很少变化、避免单独 HTTP 请求比缓存更重要的小型资源：内联在 CSS 中的小图标和 Logo、嵌入在 HTML 邮件中的图片（许多客户端会拦截外部图片但能渲染 data URI）、必须自包含的单文件小部件或书签脚本、SVG 雪碧图，以及存储在 JSON/API 载荷中的图片。一条实用经验法则：大约在 2 KB 以下且只用于一两个页面时，内联通常更划算。本工具的建议徽标正好编码了这一启发式规则——2 KB 以下为绿色，10 KB 以内为琥珀色，更大为红色。

什么时候不该用 Base64 图片？

对于任何较大或在多个页面复用的内容，请避免使用 Base64。四条具体原因：（1）约 33% 的体积增加意味着传输更多字节；（2）内联图片无法被单独缓存——每次包含它的 HTML 或 CSS 变化时都会被重新下载，并在每个嵌入它的页面上重复；（3）解码大型 data URI 会消耗 CPU 和电量，在移动端尤其明显；（4）你会失去响应式图片（srcset/sizes）和懒加载能力。由于 HTTP/2 能廉价地多路复用大量小请求，最初内联的理由——减少请求数——如今已很少适用。对于照片、主视觉图或任何超过约 10 KB 的内容，普通的可缓存文件几乎总是加载更快。如果目标是更小的文件，请先用我们的 图片压缩工具 处理一下。

如何在 HTML 和 CSS 中使用 Base64 输出？

对于 HTML，切换到 HTML 标签页并粘贴生成的元素：。对于 CSS，使用 CSS 标签页，它会把 data URI 包裹进 background-image: url("data:image/png;base64,…")。两者在任何接受 URL 的地方都能用——img src、CSS 背景、mask-image，甚至 favicon link 标签。data: 方案被所有现代浏览器支持。一个注意点：内联 HTML 中过长的 data URI 会损害可读性，在 CSS 中还会让发送给每位访客的样式表膨胀，因此请把内联留给真正小的资源。

支持哪些图片格式？

PNG、JPEG/JPG、GIF（含动图）、WebP、SVG、ICO 和 BMP 均受支持，在浏览器能解码时还支持 AVIF。由于工具编码的是原始字节而非重新渲染图片，因此动态 GIF 仍保持动画，透明 PNG 保留其 alpha 通道，SVG 仍可完全缩放。MIME 类型从文件本身读取；当你把原始 Base64 粘贴进解码器时，则从数据的魔数字节推断。编码过程中不进行任何格式转换——输出精确对应你提供的文件。

为什么 SVG 是个特例？

SVG 是 XML 文本而非二进制，因此 Base64 实际上会让它更大、更难读，却没有任何好处。在 CSS 或 HTML 中内联 SVG 时，对标记进行 URL 编码（对 #、<、> 和引号等少数字符做百分号编码）通常比 Base64 更小，并能保持源码清晰、对 gzip 友好。本工具仍提供 Base64 SVG 输出，因为某些流程需要它，但如果你在手动优化 CSS，请优先选择 URL 编码的 data URI。我们的 URL 编码/解码工具 可以帮你完成这种方式。

Base64 等同于加密吗？

不是。Base64 是一种编码而非加密——任何人都能完全可逆地解码，且无需任何密钥。它的存在是为了用一组安全的可打印 ASCII 字符表示二进制数据，使数据能安全穿过只能处理文本的系统（HTML、JSON、邮件头、URL）。任何人都能在几秒内把 Base64 字符串解码回原始图片，包括用这里的 Base64 → 图片标签页。绝不要把 Base64 当作隐藏或保护敏感图片内容的手段；它提供的机密性为零。

我能在邮件中嵌入 Base64 图片吗？

可以，而且这是该技术较好的用途之一。许多邮件客户端出于隐私考虑默认拦截外部托管的图片，这会破坏依赖远程 Logo 的版式。把小图片作为 data URI 嵌入可以确保它们无需服务器请求就立即渲染。代价是：一些较旧的客户端（尤其是某些版本的 Outlook）对 data URI 的支持时好时坏，而大型嵌入会增大每位收件人都要下载的邮件体积。请让嵌入的图片保持小巧——Logo 和图标，而非照片——并在你的目标客户端上测试。

为什么我的 Base64 图片无法显示？

最常见的原因：data: 前缀中缺少或写错了 MIME 类型（PNG 用 image/png，JPG 用 image/jpeg，SVG 用 image/svg+xml）、字符串中意外插入了空白或换行、复制被截断而丢掉了末尾的填充（= 或 ==），或者在需要 URL 的地方只粘贴了原始 Base64 而没带 data:…;base64, 前缀。本工具的解码器很宽容——它会去除空白、接受带或不带前缀的输入，并从图片的魔数字节推断 MIME——因此把你的字符串粘贴到 Base64 → 图片标签页是确认数据本身是否有效的最快方法。