如何将图片转换为 Base64 Data URI
把小图标、水印直接嵌入 HTML、CSS、JSON 或邮件模板 —— 少一次 HTTP 请求，也少一道丢资源的风险。
与本篇教程搭配使用的更多工具：
为什么重要
事务邮件需要一枚小 Logo。外链图片在用户客户端开启「为保护隐私阻止远程加载」后就会失效。解决办法：把 Logo 内联为 data:image/png;base64,...。体积会增加约 33%，但对极小资源（4 KB 以下），省掉的延迟与「一定能显示」往往更值得。同样适用于内联 favicon、CSS 背景小图标，以及静态站点生成器里的 SVG 精灵。
三个真实场景
编码 80×80 Logo，把 data URI 填入 <img> 的 src。
无需「加载远程图片」提示
background-image: url(data:image/svg+xml;base64,...) 让样式表自包含。
少一条网络请求
编码缩略图嵌入 JSON；客户端无需再请求第二张图。
单次往返即可渲染
操作指南
打开 图片转 Base64。
拖入图片
PNG、JPEG、WebP、GIF、SVG、ICO。工具通过浏览器 File API 读取。
选择输出格式
完整 data URI（
data:image/png;base64,...）——填入src或 CSS。裸 Base64——用于服务端自行拼接前缀的 JSON 字段。选择 URL 安全编码
标准 Base64 的
+/适用于 HTML/CSS。URL 安全（-_）适合放进查询串或文件名。复制或下载
超长字符串也可下载为
.txt。
源文件
icon.svg (412 bytes)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2L2 22h20L12 2z"/>
</svg>Data URI
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDJMMiAyMmgyMEwxMiAyeiIvPjwvc3ZnPg==
进阶技巧
- 仅内联极小资源（≤ 4 KB）。大图会把 HTML/CSS/JSON 撑爆，得不偿失。
- 图标优先 SVG。 SVG Base64 后体积友好且矢量无损缩放。
- CSS 使用
url()形式。background: url(data:image/png;base64,...)兼容性广。 - 邮件请在真实客户端中测试。 Windows 版 Outlook 历史上对 data URI 较挑剔；新版 Gmail/Apple Mail 通常正常。
常见误区
常见误区
URI 过长超出 CSS 解析限制
部分老旧解析器无法处理数 MB 的单行。大图应上 CDN；仅内联极小资源。
常见误区
JSON 里 data URL 因 "/" 被破坏
JSON 本身不要求转义 /，但部分编辑器会自动转义。改用 URL 安全 Base64 可规避。
常见误区
HTML 邮件内联图因 CID 冲突失效
部分客户端更偏好 cid: 引用而非 data:。请在目标客户端实测；必要时双轨兜底。
何时不适合用本工具
- 构建阶段服务端批量内联——用 Webpack
url-loader或 Vite 的?inline导入后缀。 - 编码前需图像处理——先用 图片压缩。
- 超大图——在 JSON 里塞 5 MB Base64 很低效；应改用 CDN URL。
常见问题
体积会增加多少？
Base64 膨胀约 33%。1 KB PNG 作为 data URI 约 1.37 KB。
内联图会被浏览器缓存吗？
不会——每个页面都要重新解析这些字节。因此内联只适合极小资源。
图片会上传吗？
不会。编码器在本地读取文件并直接输出字符串。
下一步
- 反向操作 —— 用 Base64 转图片 把 data URI 保存为文件。
- 编码前先压缩以控制体积：图片压缩。
- 若目标端仅接受 JPEG，可用 图片格式转换。