图片转Base64

把图片转成Base64 data URI，用在CSS、HTML或JSON里；也可以粘贴Base64字符串，还原成图片文件。

把文件拖到这里

.jpg, .jpeg, .png, .gif, .webp, .svg, .bmp, .avif, .ico, .txt · 最大10 MB

选择文件

图片转Base64Base64转图片

更多设置

输出每76个字符换行

怎么把图片转成Base64

1
拖入图片或粘贴Base64字符串
最多添加二十张图片进行编码；也可以切换方向，粘贴手头已有的字符串。装着这段字符串的.txt文件同样可以。
2
选择方向
编码得到data URI或纯Base64内容。解码得到一个可下载的图片文件，扩展名会自动设对。
3
复制字符串或下载文件
把结果直接复制到样式表里，或者保存解码后的图片。多张图片一起处理时，结果是一个ZIP：每张图片一个文本文件，外加一个汇总的JSON。

Base64到底做了什么

Base64既不压缩，也不转换格式。它只是用64个字符把同样的字节重写一遍，这些字符粘贴到文本里也不会出问题。三个字节变成四个字符，所以结果总是比原文件大三分之一左右。用Base64不是为了大小，而是为了放的位置：data URI可以直接写进样式表、HTML属性或JSON字段，在这些地方链接到一个单独的文件很别扭，甚至做不到。

data URI还是纯Base64内容

data URI是以data:image/png;base64,开头的完整字符串，浏览器在CSS背景或img src里要的就是它。纯Base64内容是那个逗号之后的全部，API字段或数据库列通常要的是这个，因为类型在那里另外记录。两者来自同样的字节，可以随时切换，不需要重新编码。

类型由字节决定

写进data URI的MIME类型，是从文件的前十二个字节读出来的，而不是看文件名。所以一个被改名成.jpg的PNG，结果仍然是data:image/png。这一点很重要：如果data URI声明的类型和内容对不上，浏览器会拒绝显示它，到时候看起来出问题的是页面，而不是文件。SVG是例外，因为它是文本：靠开头的标签识别，而不是靠二进制签名。

解码还原成文件

什么都可以粘贴：完整的data URI、只有内容的字符串，或者中间带换行的字符串。空白字符会被去掉；解码前先检查字符集，粘贴不完整时会立刻报错，而不是生成一个损坏的文件；解码出的字节再和同一张签名表比对，用来确定扩展名。如果字节和任何已知格式都对不上，格式列表会打开，由你指定它应该是什么格式。

不向任何地方发送数据

编码用的是浏览器自带的FileReader，解码用的是它内置的atob。没有第三方库，没有上传，也没有服务器。粘贴到输入框里的内容都留在这个标签页里。当字符串是一份私人文档而不是一个Logo时，这一点就很重要。

常见问题

为什么要把图片转成Base64？

为了直接嵌入，而不是链接过去。内联到CSS里的小图标能省一次HTTP请求；放进JSON里的图片可以通过只传文本的API；邮件模板可以自带图片，不怕外部引用被拦截。

转换后文件会变大多少？

大约33%到37%。Base64每三个字节要用四个字符，data URI还要再加一段很短的前缀。一张100 KB的照片会变成大约133 KB的字符串，所以内联对图标值得，对照片很少值得。

data URI和普通Base64有什么区别？

data URI是完整的一整段：data:image/png;base64,后面跟着内容，浏览器可以直接把它当作图片来源。普通Base64只有内容本身，不带类型信息，大多数API和数据库字段要的就是这种。

浏览器里这种字符串有长度限制吗？

现代浏览器在CSS和HTML里能处理好几MB的data URI，但编辑器、终端和对比工具早在那之前就卡得没法用了。这个工具接受最大10 MB的文件，生成的字符串约13.3 MB；解码时最多接受14 MB的内容。

没有data:前缀的字符串怎么解码？

直接粘贴，图片类型保持“自动”。解码出的字节会和编码时用的同一张签名表比对，所以不管有没有前缀，PNG都能靠它的89 50 4E 47文件头认出来。如果识别失败，就自己从列表里选类型。

把别人给的Base64粘贴到这里安全吗？

字符串会被解码成字节，并在你自己的标签页里显示为图片预览。它不会上传、不会执行，也不会被存储。解码只是算术运算，但要记住，得到的字节只和它的来源一样可信，所以对意料之外的结果，要像对待任何下载的文件一样谨慎。

为什么解码有时会失败？

几乎都是因为字符串不完整。粘贴时被截断、从终端复制时丢了一行，或者是用短横线和下划线代替加号和斜杠的URL安全变体，都会通不过字符集检查。从原始来源重新复制一遍，通常就能解决。