图片转 Base64

把图片转成 Base64 / DataURL,支持拖拽,方便内嵌。

拖拽图片到此处,或

什么是图片转 Base64?

图片转 Base64 工具把图片文件转换成 Base64 编码的字符串,通常以 DataURL 形式输出(如 data:image/png;base64,iVBORw0K...),支持直接拖拽图片文件到页面完成转换。转换过程在浏览器本地完成,图片不会上传到服务器。 Base64 是一种把二进制数据编码成纯文本(只包含大小写字母、数字和几个符号)的编码方式,编码后的文本可以直接嵌入 HTML、CSS、JSON 等只支持文本的地方,不需要单独的图片文件。

为什么使用图片转 Base64?

典型场景:给网页 CSS 里的小图标内嵌 DataURL,减少一次额外的图片请求;在富文本编辑器、邮件模板、配置文件里需要把图片内容以文本形式存储或传输;调试接口时需要把一张图片粘贴进 JSON 请求体作为字段值。 需要注意的是 Base64 编码会让体积膨胀约 33%,所以更适合小图标、小图片这类场景,如果是大图片或页面主要内容图,直接引用图片文件通常对加载性能更友好,也更容易被浏览器缓存复用。

使用示例

生成 DataURL

拖入一张 5KB 的 PNG 图标,工具输出类似 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA... 的完整字符串,可直接复制粘贴到 HTML 的 img 标签或 CSS 中使用。

内嵌到 CSS

把生成的 DataURL 粘贴进 CSS 的 background-image 属性中,浏览器会直接解码显示图片,不需要单独请求图片文件,适合小于几 KB 的小图标。

提取纯 Base64(不含前缀)

有些场景(如某些 API 参数)只需要纯 Base64 字符串而不需要 data:image/png;base64, 这个前缀,工具通常也支持只复制去掉前缀后的编码部分。

使用提示

内嵌 Base64 图片会随所在的 HTML/CSS/JS 文件一起被下载,且无法像普通图片那样被浏览器单独缓存复用,只适合几 KB 以内、且很少变化的小图标场景,页面主图、大尺寸配图仍建议使用独立的图片文件。

常见问题

DataURL 和纯 Base64 有什么区别?
DataURL 是 `data:image/png;base64,xxxx` 这样带 MIME 类型前缀的完整字符串,可直接用于 `<img src>`;纯 Base64 只是后面那段编码数据,若粘贴纯 Base64,本工具会自动补上默认前缀预览。
转换后的字符串会比原图大吗?
会。Base64 编码通常会让体积增大约 33%,适合小图标或需要内嵌到 CSS/JSON 的场景,大图不建议使用。
数据会上传吗?
不会。图片读取与编码使用浏览器 FileReader 在本地完成,不经过服务器。
转换后的字符串比原图片文件大很多吗?
是的,Base64 编码会让数据体积增加约 33%,这是编码方式本身的固有开销,不是工具的问题,因此不建议对较大的图片使用这种方式内嵌。
图片会上传吗,安全吗?
不会,转换在浏览器本地完成,选中的图片文件不会发送到任何服务器。
生成的 DataURL 能用在所有地方吗?
现代浏览器、大多数邮件客户端、支持富文本的编辑器都能识别标准的 DataURL,但部分老旧邮件客户端或对字符串长度有限制的字段可能不支持过长的 Base64 内容,使用前建议先在目标环境测试。
支持哪些图片格式?
常见的 JPG、PNG、WebP、GIF、SVG 等格式都可以转换,转换后 DataURL 的 MIME 类型会根据原图片格式自动设置。
转换大图片会卡吗?
图片越大,生成的 Base64 字符串越长,浏览器处理和页面渲染这段文本时开销也越大,几 MB 以上的大图片不建议用这种方式,性能和体验都会打折扣。

相关工具

相关教程

← 返回工具箱· 数据均在浏览器本地处理,不上传服务器。