图片转 Base64 可以一次转多张吗？

不可以。工具一次处理一张图片，批量场景需逐张处理。

图片转 Base64 会上传图片吗？

不会。图片只在你的浏览器里被读取和编码，全程不上传服务器。

图片转 Base64 怎么用？data URI、纯 Base64 与 CSS 三种输出怎么选

Q: data URI 和纯 Base64 有什么区别？

data URI 多了一段前缀，形如 data:image/png;base64,，浏览器靠它识别这是图片及格式。放进 img 标签或 CSS 需要前缀；传给后端接口通常只要后面的纯 Base64。

要把一张小图标塞进单个 HTML 文件、把 logo 写进邮件模板、或者让一段 CSS 不依赖外部图片——这些场景都需要把图片变成一串能直接写进代码的字符，也就是 Base64。

这篇用 NBTools 图片转 Base64讲清楚：三种输出分别该粘到哪里、体积会多出多少、以及哪些图不该这么转。图片只在你的浏览器本地读取和编码，不上传服务器。

图片和文本用的是两个工具

先说一个容易混淆的点：

Base64 编解码处理的是文本——把一段字符串编成 Base64，或把 Base64 解回字符串。
图片转 Base64处理的是图片文件——读取图片字节后编码，并生成能直接用的代码。

把图片文件的二进制内容直接粘进文本工具是行不通的，要走图片专用工具。

三步拿到可用代码

放入图片：点击区域选择文件，或把图片拖进去。
看四项统计：工具会显示文件名、文件大小、类型，以及Base64 大小——后两项直接对比，就能看出这次转换的体积代价。
复制需要的那一种：下方有三块输出，各配一个「复制」按钮，按用途取用。

三种输出的区别

输出	长什么样	用在哪
含 data URI 前缀	`data:image/png;base64,iVBOR…`	直接放进 `<img src="">`、Markdown、富文本编辑器
不含前缀（纯 Base64）	`iVBOR…`	传给后端接口、存进 JSON、自己拼前缀的场景
CSS background-image	`background-image: url("data:image/png;base64,…");`	直接粘进样式表，作为背景图

简单记：要放进 HTML 标签用第一种，要交给程序用第二种，要放进 CSS 用第三种。工具已经把三种都生成好了，不用自己拼字符串。

工具还会在下方预览这张图，粘代码前先确认预览正常，避免复制了一串截断的内容。

代价：体积会多出约三分之一

Base64 用 4 个字符表示 3 个字节，所以编码结果通常比原文件大出三分之一左右。这不是出错，是编码方式本身决定的。

工具把「文件大小」和「Base64 大小」并排显示，就是为了让这个代价一眼可见。转之前先对比这两个数字，再决定要不要内嵌。

哪些图适合转，哪些不适合

场景	建议	原因
几 KB 的小图标、装饰角标	适合	体积代价小，换来不用额外请求
单文件 HTML、邮件模板里的 logo	适合	避免外链失效或图片被拦截
几十 KB 以上的照片	不适合	体积增加明显，还会拖慢首屏
需要被浏览器缓存复用的图	不适合	内嵌后随文档一起加载，无法单独缓存
要走 CDN 的图片	不适合	内嵌后享受不到 CDN 分发

判断标准其实就一条：这张图是不是小到「多写几千个字符也无所谓」。是，就内嵌；不是，就老老实实用图片文件。

两个使用边界

只认图片文件：工具会检查文件类型，不是图片会提示「请选择图片文件」。如果你要转的是 SVG 之外的矢量文件或 PDF，本工具不适用。
一次一张：工具一次处理一张图片，批量图标建议先用专门的工具合并或压缩后再来转。

常见问题

data URI 和纯 Base64 有什么区别？

data URI 多了一段前缀，形如 data:image/png;base64,，浏览器靠它知道这是图片以及是什么格式。放进 img 标签或 CSS 时需要前缀；传给后端接口时通常只要后面那段纯 Base64。

转换后体积会变多少？

通常比原文件多出三分之一左右。工具会同时显示文件大小与 Base64 大小，可直接对比。

支持哪些图片格式？

工具按文件类型判断是否为图片，常见位图格式均可。若不是图片文件会提示「请选择图片文件」。

可以一次转多张吗？

不可以。工具一次处理一张图片，批量场景需要逐张处理。

能直接生成 CSS 代码吗？

可以。工具会生成形如 background-image: url("data:image/png;base64,…"); 的一行样式，复制后直接粘进样式表即可。

图片会被上传吗？

不会。图片只在你自己的浏览器里被读取和编码，全程不上传服务器，可放心处理未公开的设计稿。