🖼️

图片转Base64

拖放任意图片,将其转换为 Base64 字符串或 data URI。选择输出格式,并直接复制到 HTML、CSS 或 JSON 中。不会上传文件——一切都在浏览器中运行。

图片工具 本地运行 不发送数据
Base64data URI嵌入图片
图像文件
📤
将图像拖放到此处,或点击浏览
JPEG、PNG、WebP、GIF、SVG、BMP、ICO——本地处理
预览

什么是图片转Base64?

图片转Base64 使用浏览器内置的 FileReader API,将图片文件转换为 Base64 编码字符串。输出可格式化为原始 Base64 字符串、完整 data URI、CSS background-image 声明或 HTML img 标签——取决于目标用例。

如何使用图片转Base64

  1. 将图像文件拖放到拖放区,或点击浏览。
  2. 选择输出格式:Data URI、原始 Base64、CSS background-image 或 HTML img 标签。
  3. 一键将结果复制到剪贴板。
  4. 直接粘贴到 HTML、CSS、JSON 或任何其他目标位置。
了解 Base64 图片编码 ▾
示例
输入 logo.png(2 KB)
输出 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...
常见使用场景
  • 在 HTML 电子邮件中嵌入小 logo
  • 在 CSS 文件中内联加载指示器或图标
  • 将图片数据作为 JSON 字符串传给 API
  • 创建内嵌图片的自包含 HTML 文件
为什么使用此工具
  • 四种输出格式 —data URI、原始 Base64、CSS 和 HTML。
  • 显示原始大小与编码后大小以及增幅百分比。
  • 当图片大到足以影响页面性能时会发出警告。
  • 无需上传文件 —所有操作都在浏览器中运行。
常见问题
什么是 Base64 图片?

Base64 是一种将二进制数据(如图片)编码为纯文本 ASCII 字符串的方式。data URI 是带有 MIME 类型前缀的 Base64 字符串,格式为 data:image/png;base64,... —可直接放入 img 标签的 src 属性或 CSS background-image 中,从而嵌入图片而无需单独请求文件。

什么时候应使用 data URI?

data URI 非常适合小型图标、徽标,或外部文件引用可能被阻止的 HTML 邮件中的内联图片。对于大图片,它们会增加页面体积并可能影响性能,因此请谨慎使用。

我的图像会上传到服务器吗?

不会。FileReader API 会直接在浏览器中编码图片。图片不会离开你的设备。

Base64 图片会增大多少?

Base64 编码会使数据大小增加约 33%,因为每 3 字节二进制数据会变成 4 个 ASCII 字符。100 KB 的图片转为 Base64 字符串后约为 133 KB。