图片转 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 能用在所有地方吗?
支持哪些图片格式?
转换大图片会卡吗?
相关工具
相关教程
← 返回工具箱· 数据均在浏览器本地处理,不上传服务器。