图片转Base64
⚡ 本地运行🔒 不上传数据🆓 免登录免费
data URI 是一种把文件内容直接写进网址的格式：data:[<MIME 类型>][;base64],<数据>。图片转 Base64 就是先把图片的二进制字节编码成纯 ASCII 文本，再拼上 data:image/png;base64, 这样的前缀。浏览器看到这种“网址”不会再发一次 HTTP 请求，而是直接把后面的文本解码还原成像素渲染出来。代价是固定的：Base64 用 4 个字符表示 3 个字节，体积膨胀约 33%，再加上几十字节的前缀。
最常见的用途是前端性能优化：网站的小图标、logo、占位图如果走普通外链，每张都要一次 HTTP 请求；内嵌成 data URI 后直接跟 HTML、CSS 一起下发，首屏更快，也省掉了小文件走 CDN 的调度开销。第二个高频场景是单文件交付：做 HTML 演示页、邮件模板、离线文档时，图片变成一串文本，整个页面只有一个文件，复制粘贴就能分享，不用搭图床——很多邮件客户端默认屏蔽外链图片，内嵌的 data URI 反而能直接显示。
调试和联调时也很好用：往 JSON 接口里传一张测试图、给自动化用例造数据、把截图贴进工单或文档，一串文本比传文件方便得多。但 data URI 不是越大越好：浏览器无法像普通图片那样缓存它，1MB 的图会变成约 1.37MB 的文本塞进 HTML，拖慢首屏解析。经验线是 10KB 以内放心内嵌，几十 KB 看场景，超过 100KB 就要掂量——本工具对超过 1MB 的图片会弹出提示，请先压缩或改用 CDN。
几个常见坑：data URI 里不能出现换行，复制时如果带入换行符，部分老解析器会失败；SVG 做 data URI 时通常 URL 编码比 Base64 体积更小；文件名里的中文不影响转换，生成的 alt 文本已做过滤。最重要的一点：data URI 解码就是原图，敏感图片转完不要贴到公开的聊天记录或文档里。另外所有转换都在你的浏览器本地完成，关掉页面数据就消失，不会上传到任何服务器。
使用方法
- 把图片拖进页面上方的虚线框，或点「点击选择图片」从本地挑选（可多选，JPG、PNG、GIF、WebP、SVG 都支持）
- 在「输出格式」里选择：完整 data URI、CSS background-image，或 HTML <img> 标签
- 每张图片会显示缩略图、尺寸，以及「原图 → Base64」的体积变化，文本框里就是可直接使用的结果
- 点「复制结果」粘贴到代码中，或点「下载文本」存成 .txt 备用；超过 1MB 的图片会弹出提示请先确认
常见问题
data URI 和普通图片链接有什么区别？
普通 <img src="https://…"> 只是一个引用，浏览器还要再发一次 HTTP 请求去下载；data URI 把图片内容直接写进 src，零额外请求。但代价有二：体积固定膨胀约 33%，且浏览器无法像普通图片那样缓存它。小图标内嵌划算，大图还是走链接加 CDN。
为什么转换后体积变大了？
这是 Base64 编码本身的代价，不是工具的问题：每 3 个字节的二进制变成 4 个 ASCII 字符，固定膨胀约 33%，再加上 data:image/png;base64, 这段前缀。1MB 的图片转完约 1.37MB，完全正常。
多大的图片适合转 Base64？
经验线：10KB 以内放心内嵌；几十 KB 看具体场景（图标、首屏关键小图优先）；超过 100KB 就要掂量收益；超过 1MB 基本不建议，本工具会对这类图片弹出提示。大图请先压缩，或直接用 CDN 外链。
转换结果在 CSS 和 HTML 里分别怎么写？
CSS：background-image: url("data:image/png;base64,……"); HTML：<img src="data:image/png;base64,……" alt="描述">。注意三点：CSS 里 url() 的引号不要漏；data URI 中间不能换行；HTML 里不要把结果里的双引号和属性引号搞混——本工具的「HTML <img> 标签」格式已经帮你拼好，直接复制即可。
我的图片会被上传到服务器吗？
不会。转换用的是浏览器的 FileReader.readAsDataURL，全程在本地执行，页面关掉数据就消失。你可以断网再试一次：功能照常用，这就是本地运行的证明。