图片

图片转 Base64（Data URI）

把图片转换成可直接嵌入 HTML 或 CSS 的 data URI，并附上可直接粘贴的代码片段。

拖放图片到此处，或点击选择

支持 JPG、PNG、WebP、GIF、AVIF、SVG

本工具完全在浏览器中运行——数据不会离开您的设备。

什么是图片转 Base64（Data URI）？

Data URI 把文件内容直接嵌入源代码，而不是指向一个路径。对图片来说，这意味着浏览器无需再发一次网络请求去取图——图片已经随 HTML 或 CSS 一起送达了。

这种做法只对小图划算。Base64 会让数据膨胀约 33%，而且嵌入的图片无法被单独缓存，每次重新加载页面都要重新下载一遍。对几 KB 的图标来说，省下一次往返是值得的；换成大图就得不偿失了。

使用方法

  • 把图片拖放到方框中，或点击选择文件。
  • 工具会生成三种形式：纯 data URI 字符串、HTML 的 img 标签、CSS 的 background-image 声明。
  • 在需要的那一项点击复制，直接粘贴进源代码。
  • 查看编码后大小一行，判断是否值得嵌入。

常见问题

为什么 Base64 字符串比原文件长？

因为每 3 个字节的二进制数据要用 4 个文本字符表示，体积增加约 33%。这是用文本表示二进制数据的固有代价。

什么时候适合把图片嵌成 Base64？

当图片很小且出现在每个页面上时——图标、背景纹理、占位图。常见的建议阈值是 10 KB 以内。超过这个大小，使用独立图片文件会更快，因为可以被缓存。

SVG 可以这样嵌入吗？

可以，但对 SVG 而言，把源码直接内联进 HTML 通常更好——既比 Base64 短，又能用 CSS 改变图形颜色。