图片 Base64 转换

图片与 Base64 编码互转,支持拖拽上传和实时预览

上传图片

拖拽图片到此处,或点击选择文件

支持 JPG、PNG、GIF、WebP、SVG 等格式

什么是 Base64 图片编码?

Base64 是一种基于 64 个可打印字符来表示二进制数据的编码方式。图片 Base64 编码将图片的二进制数据转换为一串 ASCII 字符,使图片可以直接嵌入到 HTML、CSS 或 JSON 等文本格式中。

Data URL 格式:data:image/[格式];base64,[编码数据]

使用方法

图片转 Base64

  1. 拖拽图片到上传区域,或点击选择文件按钮
  2. 选择输出格式:包含 Data URL 前缀或纯 Base64
  3. 点击「复制 Base64」按钮复制结果
  4. 将复制的内容粘贴到需要的地方

Base64 转图片

  1. 将 Base64 字符串粘贴到输入框
  2. 点击「转换为图片」按钮
  3. 预览转换结果,可下载保存图片

使用实例

在 HTML 中使用

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." alt="image description">

在 CSS 中使用

.background {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...');
}

在 JSON API 中传输

{
    "image": "iVBORw0KGgoAAAANSUhEUgAAAAUA...",
    "format": "png"
}

常见问题 (FAQ)

Q: 为什么要将图片转为 Base64?

A: Base64 编码可以减少 HTTP 请求数量,适合小图标、背景图等场景。图片直接嵌入到代码中,无需额外的文件请求。

Q: Base64 编码后图片会变大吗?

A: 是的,Base64 编码会使数据增大约 33%。建议只对小图片(通常小于 10KB)使用 Base64 编码。

Q: 大图片适合用 Base64 吗?

A: 不推荐。大图片编码后的字符串很长,会增加 HTML/CSS 文件体积,影响加载性能。建议使用图片 CDN 或懒加载技术。

Q: 图片会上传到服务器吗?

A: 不会。所有转换都在您的浏览器本地完成,图片数据不会上传到任何服务器,保护您的隐私安全。