图片 Base64 互转
把图片内嵌进 HTML / CSS,或把一段编码还原回图片文件。全部处理在当前浏览器内完成,图片不会离开你的设备。
- jpg, jpeg, png, webp, gif, svg, bmp, ico
- 免注册
- 批量处理
拖拽图片到这里,或点击选择文件
支持 jpg, jpeg, png, webp, gif, svg, bmp, ico
单次最多 30 张 · 合计不超过 300 MB · 单张最大 50MB
单次最多 30 张 · 合计不超过 300 MB · 单张最大 50MB
待处理队列
已加载 0 项
还没有选择文件
在图上操作
就绪
处理结果
尚未开始
正在处理…
0.0s
正在你的浏览器里处理,图片不会上传;张数多或尺寸大时需要等一会儿。
处理完成后,结果会显示在这里。
图片 Base64 互转能做什么
- 图片转 Base64:支持 Data URL、HTML img 标签、CSS background 三种成品形态,复制即可用
- Base64 还原图片:把编码贴进去直接下载成图片文件,不需要写代码
- 本地完成:转换全程在浏览器里进行,图片不会被上传
- 体积提醒:超过设定大小的图片会提示,避免把大图内嵌进页面拖慢加载
参数怎么调
下表列出该工具的全部可调参数与建议取值。不确定时保持默认值即可,默认值是多数场景下的稳妥选择。
| 参数 | 可选值 | 默认 | 说明 |
|---|---|---|---|
| 转换方向 | 图片 → Base64 / Base64 → 图片 | encode | 两个方向在同一个页面切换,不用找另一个工具。 |
| 输出形态 | 纯编码 / Data URL / HTML img 标签 / CSS background | dataurl | 粘进代码用的选后三种,它们会带上必要的前缀;自己拼字符串的选「纯编码」。 |
| 纯编码前缀 | 自由填写 | 留空则只输出编码正文。需要自己控制前缀时在这里填。 | |
| 超过此体积提示 | 0 – 5120KB | 100KB | Base64 会让体积增大约 33%,超过 100KB 的图内嵌进页面会拖慢加载。超过阈值时页面会给出提示。 |
适用场景
- 把小的图标或 Logo 内嵌进 HTML,减少一次请求
- 邮件模板里嵌入图片(很多邮件客户端会拦截外链图片)
- 把接口返回的 Base64 图片数据还原成文件保存
- 单文件 HTML 交付,把图片一起打包进代码
常见问题
Base64 会让文件变大吗?
会。Base64 用 4 个字符表示 3 个字节,体积约增加 33%。所以它适合小图片(图标、分隔线、加载图),大图内嵌反而拖慢页面加载——那种情况用普通图片链接更好。
Data URL 和纯编码有什么区别?
Data URL 带 `data:image/png;base64,` 这样的前缀,浏览器能直接识别并渲染。纯编码只有字符本体,需要你自己补前缀或由程序解码。粘进 HTML / CSS 的场景用 Data URL 更省事。
把编码贴进去后还原出的图片打不开?
常见原因是编码不完整或被截断(复制时漏掉结尾,或从聊天工具里复制被换行截断),也可能夹带了多余空白。可以先把编码里的换行和空格去掉再试。