浏览器本地处理 · 不上传服务器

图片转 Base64

将图片转换为 Base64 编码字符串，方便嵌入 HTML、CSS。

拖拽图片到此处，或点击选择文件

选择文件

JPGPNGWebPBMPGIF

最大 50MB · 浏览器本地处理

生成设置

包含 data:image 前缀

Base64 编码结果

编码长度: 0

图片转 Base64：把图片变成一段纯文本

图片转 Base64 工具能把一张图片编码成一段由字母、数字和符号组成的纯文本字符。这段文本可以直接粘贴进 HTML、CSS 或 JSON，浏览器会把它还原成原来的图片。整个过程完全在你的浏览器里完成，图片不会上传到服务器，因此既快又安全，尤其适合开发者快速处理小图标或小图。

在网页开发中，内联小图是个很实用的技巧：它能省掉额外的图片 HTTP 请求，让页面加载更快，也方便你把内容打包成单文件应用或邮件。

Base64 是怎么编码的？

Base64 是一种把二进制数据转换为 ASCII 文本的编码方式。它把每 3 个字节（24 位）拆成 4 组 6 位，每组对应一个 Base64 字符表里的字符，因此理论上编码后的文本长度约为原始数据的 4/3，也就是大约增大到原来的 1.37 倍。图片的字节被读进浏览器后，按这个规则重新映射成文本，就得到了你看到的 Base64 字符串。

编码是"可逆"的：浏览器拿到这段文本后可以反向解码，重新还原出原始图片字节，所以图片显示出来的内容和原图一模一样。

具体怎么用？

1. 上传或拖拽一张图片（支持 JPG / PNG / WebP 等常见格式）。
2. 工具会立即在本地把图片编码成 Base64 字符串。
3. 点击结果框里的"复制"按钮，把完整字符串复制到剪贴板。
4. 把这段文本粘贴到需要的地方：HTML 的 <img src="data:image/png;base64,....">、CSS 的 background-image: url(data:...)，或 JSON 字段里。

什么时候该用、什么时候不该用？

适合用：几 KB 以下的小图标、LOGO、favicon，或需要"单文件"交付的场景（如单页应用、HTML 单文件、签名邮件）。
不适合用：大图或大量图片。因为编码后体积反而变大，如果内联很多大图，HTML 会变得极其臃肿，加载反而更慢。此时应把图片放到独立文件，用 CDN 或缓存来优化。

经验法则：小于 10KB 的图优先内联，更大的图建议外链，这样能在"减少请求"和"保持体积"之间取得平衡。

编码结果该怎么用？

拿到 Base64 字符串后，你可以直接嵌入页面并配合 data: URI 协议使用。若想让页面体积更小，可先用好「图片压缩」工具把图压小，再转 Base64；若想精确控制尺寸，也可先用「图片裁剪缩放」调整到目标像素，再做内联。

举个例子：如果你想在 HTML 里内联一个 4KB 的 logo，直接写 <img src="data:image/png;base64,iVBORw0KGgo..."> 即可，浏览器能立即解析并显示。这样做的好处是省去了一次网络请求，且图片能跟随 HTML 一起被缓存，适合图标类和"必须单文件"的场合。

浏览器兼容性要注意什么？

现代浏览器（Chrome、Firefox、Safari、Edge）都能完整支持 Base64 的 data: URI，包括 CSS 的 background-image: url(data:...)、HTML 的 img 和 `<link>`。但要注意：旧版 IE 对 Base64 图片的缓存和部分 MIME 类型支持较差，若目标用户包含大量旧浏览器，建议谨慎内联。此外，内联图片会显著增加 HTML 源文件长度，不利于源码阅读，因此更适合封装成组件或构建时自动处理，而非长期人工维护。

Base64 会让体积变大多少

Base64 把每 3 个字节拆成 4 个 6 位组，每个组映射为一个可打印字符，因此编码后长度约为原字节的 4/3，并按 4 的倍数补齐。这个膨胀是固定的数学结果，与图片内容无关，所以可以事先算出来。

常见图片体积的 Base64 编码长度
原图大小	字节数	Base64 字符数	膨胀倍数
1 KB	1,024	1,368	1.336×
5 KB	5,120	6,828	1.334×
10 KB	10,240	13,656	1.334×
50 KB	51,200	68,268	1.333×
100 KB	102,400	136,536	1.333×
500 KB	512,000	682,668	1.333×

注意：表中的字符数按 4×ceil(字节数/3) 计算，末尾的等号填充也已计入；无论图片是什么格式，膨胀比例都落在约 1.334 倍。

内联还是外链

内联省掉一次请求，但要付出约三分之一的体积代价，并且无法单独缓存。是否划算，取决于图片大小与复用频率。

data URI 内联与外链文件对比
维度	内联 data URI	外链图片文件
额外 HTTP 请求	0 次	1 次（HTTP/2 下成本较低）
传输体积	约 1.334 倍	原始体积
缓存	随 HTML 一起缓存，无法单独失效	可长期缓存并单独更新
首屏影响	增大 HTML，阻塞解析	可延迟加载
适合场景	小图标、单文件交付、邮件签名	常规图片、需要缓存的图片

长度上限与实用阈值

data URI 没有统一的规范长度上限，实际限制由各家浏览器实现决定：早期 IE8 限制在约 32 KB，现代浏览器可处理 MB 级数据。但解析成本随长度增长，超过几十 KB 后，内联带来的请求收益通常已被体积与解析开销抵消。

常见问题

为什么编码后字符串比图片还大？Base64 用 6 位表示一个字符，3 字节变成 4 个字符，因此固定膨胀约 1.334 倍，这是编码规则决定的。

多大的图片适合内联？通常以几 KB 到十几 KB 为界。超过这个范围，体积与解析开销会超过省下一次请求的收益。

编码会改变图片画质吗？不会。Base64 只是表示方式的变化，解码后得到与源文件完全相同的字节。

可以只编码图片的一部分吗？工具按整张图片编码。需要先裁剪时，可先用裁剪工具处理再编码。