图像到BASE64转换器

步 1 / 3

正在恢复所选文件……

Base64数据URL把图像的媒体类型和编码后的字节组合成一个文本值，例如data:image/png;base64,...。选择一个不超过20 MiB的图像，转换器便会在浏览器本地生成该值。复制前，你可以查看原文件信息和生成的数据URL的大致长度。

如何对图像进行 Base64 编码

1

选择图像

选择一个不超过20 MiB的图像文件。
2

在本地编码

浏览器读取文件并生成完整的Base64数据URL，无需上传到服务器。
3

检查结果

查看媒体类型、原文件信息以及生成的数据URL的大致长度。
4

复制数据URL

将完整的`data:image/...;base64,...`值复制到剪贴板。

何时内联显示，何时链接显示

Base64编码能节省一次HTTP请求，代价是体积增加33%，对于某些资源而言非常划算，而对于其他资源则可能造成浪费。

大小计算

原始大小	Base64编码大小	额外字节数
1 KB	1.36 KB	360 B
10 KB	13.6 KB	3.6 KB
100 KB	136 KB	36 KB
1 MB	1.36 MB	360 KB

决策指南

使用场景	内联或外部
图标大小小于 2 KB（SVG 标志、精灵图）	内联显示
CSS 中的光标图像 (`cursor: url()`)	内联
小型自包含HTML或CSS示例	内联
图标被打包到 JavaScript 载荷中	内联
主视觉大图，大于 50 KB	外部
可单独缓存的任何内容	外部

数据URI格式

data:[<mediatype>][;base64],<data>

示例：

data:image/png;base64,iVBORw0KGgo...，PNG
data:image/svg+xml;utf8,<svg>...</svg>，SVG ，通常在不使用Base64编码的情况下显示效果更佳
data:image/jpeg;base64,/9j/4AAQS...，JPG

小贴士

SVG 通常采用 url() 配合 utf8 编码（而非base64）更为理想；这种方式更简洁且易于阅读。
编码过程不会检查或清理图像内容。请只嵌入可信文件，尤其是可能包含活动内容或外部引用的SVG。
若 JSON 有效载荷内的大图像体积过大，将无法进行解析；建议采用多部分结构或外部引用方式。
使用 Base64 编码的 CSS background-image 可实现简洁的内联渲染，但无法实现跨页面缓存。

常见问题

Base64将3个字节的输入数据编码为4个字符，因此输出长度始终比输入长度长约33%。一张10 KB的图像对应的字符串长度约为13,600个字符，较长的字符串十分常见。

本工具可处理一个不超过20 MiB的图像。这只是处理上限，并非建议的内嵌大小。数据URL通常应尽量小，因为Base64会使源文件增大约三分之一，而且无法单独缓存图像。

不。Base64编码会在您的浏览器中运行，图像永远不会离开您的设备。

此编码工具不提供反向转换。请使用单独的“Base64转图像”工具，将数据URL或原始Base64字符串还原为可下载的图像文件。

相关工具