图像转Base64转换器 - 将图像编码为Data URI

将图像编码为Base64 data URI,并复制为HTML img标签、CSS url()、Markdown或原始字符串。

图像转Base64的作用

此工具将每个图像加载到浏览器画布上,然后使用FileReader的readAsDataURL方法读取原始文件。它返回一个以data:image/png;base64,为前缀的字符串,后跟二进制文件的Base64表示。该字符串可以直接放入HTML img标签或CSS url()中使用。

为什么需要将图像编码为Base64

Data URI将图像转换为文本,消除了单独文件和单独HTTP请求的需要。

直接在HTML或CSS中内联小图标
在单个自包含文件中传输图像
在JSON、YAML或数据库列中嵌入图像数据
报告错误或编写测试用例而不提交二进制文件

如何将图像转换为Base64

四个步骤,全部在本地——文件在浏览器中读取。

1

放入一个或多个图像

2

检查编码后的大小和额外开销

3

选择输出格式

4

复制到剪贴板或下载为.txt文件

常见问题

因为Base64是一种编码,而不是压缩器。它使用4个可打印ASCII字符表示3字节的二进制数据,因此输出总是比输入长约33%,加上数据URI前缀的几个字节。
当资源很小且始终需要时内联:图标、1x1间隔符、微小的背景纹理,大约10KB以下。低于此阈值,节省一个HTTP请求通常胜过33%的大小惩罚。对于大于10KB的资源或更改频率高于其所在页面的图像,不要内联。
通常不行。Gmail会直接从img标签中剥离data URI,Outlook的桌面客户端从未可靠地支持它们。Apple Mail和一些webmail客户端确实会渲染它们。可靠的方法是附上实际的图像文件。
可以,而且是无损的——解码后的字节与原始文件完全相同,包括EXIF和色彩配置文件数据。将完整的data URI粘贴到浏览器地址栏中,图像就会渲染。在代码中,标准的Base64解码函数将其转换回二进制。
不是。SVG已经是文本,因此Base64无缘无故增加了33%。直接将标记粘贴到HTML中,CSS可以样式化形状,JavaScript可以访问它们。对于CSS背景,使用不进行编码的url(data:image/svg+xml,...)。
HTML或CSS规范中没有限制,现代浏览器可以处理src属性中数兆字节的data URI。实际限制在别处:URL栏通常在2MB左右截断。浏览器有内存限制。
不需要。文件使用浏览器的FileReader API读取,该API在本地文件句柄上操作,结果字符串保留在页面内存中。没有任何内容通过网络发送,也没有服务器端存储。
所有浏览器都支持图像——img src和CSS url()中的data URI从IE8开始就已存在,今天普遍支持。剪贴板是较新的部分:navigator.clipboard需要安全上下文(HTTPS或localhost),这就是为什么此页面在新选项卡中打开结果。

更多图片工具

探索其他强大的图片编辑工具