图片 ↔ Base64

图片与 Base64 互相转换，本地处理不上传

上传图片
🖼️

点击或拖拽上传图片

支持 JPG、PNG、WebP、GIF、BMP、SVG 等格式
Base64 结果
Base64 输入
图片预览
🔍

解码后的图片将在这里预览

什么是图片与 Base64 互相转换？

图片与 Base64 互相转换是指将二进制图片文件编码为 Base64 字符串，或者将 Base64 字符串还原为可视图片的双向操作。Base64 是一种用 64 个可打印字符表示二进制数据的编码方式，它可以将任意图片文件转换成一串由字母、数字和符号组成的文本字符串。

这个技术的典型应用是 Data URL（data:image/png;base64,...），它允许将图片数据直接嵌入到 HTML 的 <img> 标签 src 属性或 CSS 的 background-image 中，从而避免额外的 HTTP 请求。在前端开发中，这种方式特别适合小图标、头像等体积较小的图片资源。反向操作则是将已有的 Base64 字符串解码还原为图片文件，用于查看或下载。

为什么需要图片与 Base64 转换工具？

图片 Base64 编码在前端开发和数据处理中有广泛用途：

  • 内联图片：将小图片（如图标、logo）转为 Base64 Data URL 直接嵌入 HTML/CSS，减少 HTTP 请求数量，提升页面加载速度
  • 邮件嵌入：在 HTML 邮件中将图片以 Base64 内嵌，确保收件客户端能正确显示图片（很多邮件客户端屏蔽外部图片链接）
  • JSON/XML 传输：在 API 接口或配置文件中以文本形式传递图片数据，避免文件路径依赖问题
  • CSS Sprite 替代：对于少量小图标，Base64 内联比制作雪碧图更简单快捷
  • 图片还原：将从接口获取的 Base64 图片字符串解码为可下载的图片文件

使用 IqsBot 图片与 Base64 转换工具，你可以轻松实现图片与 Base64 之间的双向转换。

相比其他在线 Base64 工具，IqsBot 的核心优势是纯浏览器端运行——你的图片数据不会上传到任何服务器，完全在本地处理。对于包含个人照片、未公开的设计稿等敏感图片，隐私安全有充分保障。同时工具提供 Data URL 预览和使用示例，方便直接复制到代码中使用。

如何使用 IqsBot 图片与 Base64 转换工具

基础用法

图片 → Base64 方向：

  1. 切换到「图片 → Base64」标签页
  2. 点击或拖拽上传需要转换的图片文件（支持 JPG/PNG/WebP/GIF/BMP/SVG）
  3. 点击「生成 Base64」按钮
  4. 复制纯 Base64 字符串或完整的 Data URL 到剪贴板

Base64 → 图片方向：

  1. 切换到「Base64 → 图片」标签页
  2. 在输入框中粘贴 Base64 字符串或完整的 Data URL（支持自动识别 MIME 类型）
  3. 点击「解码预览」查看还原后的图片
  4. 选择下载格式（PNG/JPEG/WebP）并下载图片文件

高级功能

  • 双 Tab 双向转换：一个页面同时支持图片转 Base64 和 Base64 还原图片两个方向
  • Data URL 预览：生成 Base64 后展示完整的 Data URL 格式，并提供 HTML/CSS 用法示例代码
  • MIME 类型自动识别：粘贴 Base64 字符串时，工具自动识别图片类型（png/jpeg/webp/gif）
  • 多格式下载：解码成功后可选择将图片下载为 PNG、JPEG 或 WebP 三种格式
  • 剪贴板粘贴：Base64 → 图片方向支持一键从剪贴板粘贴，免去手动复制的麻烦
  • 大文件警告：当图片超过 5MB 时会提示性能影响，帮助用户合理预期

使用示例

示例1：生成 CSS 内联背景图

你有一个小的 logo 图片（icon.png, 12KB），希望直接嵌入 CSS 避免额外请求：

  1. 上传 icon.png
  2. 点击「生成 Base64」
  3. 复制 Data URL

得到的 Data URL 可直接写入 CSS：

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...");

示例2：还原 Base64 图片

你从某个 API 返回的数据中拿到了一串 Base64 编码的图片：

  1. 切换到「Base64 → 图片」标签
  2. 将 Base64 字符串粘贴到输入框
  3. 点击「解码预览」，图片立即显示在右侧预览区
  4. 选择 PNG 格式点击「下载图片」

常见问题

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

A: 会。Base64 编码会使数据体积增大约 33%（原始每 3 个字节变成 4 个 Base64字符）。例如一个 100KB 的图片编码后 Base64 字符串约为 133KB。因此这种方法只适合较小的图片（通常建议小于 10KB），大图片还是建议使用外部链接。

Q: Data URL 和纯 Base64 有什么区别？

A: Data URL 是完整的 URI 格式，包含 data:image/png;base64, 前缀 + Base64 数据。可以直接赋值给 <img src> 或 CSS url() 使用。纯 Base64 则只是编码后的字符串本身，没有前缀元信息。本工具同时提供两者——你可以根据需要复制。

Q: 支持哪些图片格式？

A: 上转方向（图片 → Base64）支持浏览器能识别的所有图片格式，包括 JPG、PNG、GIF、WebP、BMP、SVG 等。下载方向（Base64 → 图片）支持导出为 PNG、JPEG、WebP 三种最常用的格式。

Q: 粘贴 Base64 后提示"无效的 Base64 字符串"怎么办？

A: 请检查以下几点：1) 是否包含了非 Base64 字符（如多余的空格、引号或 JSON 包裹）；2) 如果是从 JSON 中复制的，可能需要去掉两端的引号；3) 如果是完整的 Data URL（带 data:image/...;base64, 前缀），工具会自动识别并解析。

Q: 我的数据会上传到服务器吗？

A: 绝对不会。所有编解码操作都通过浏览器原生 API（FileReader、Canvas）在本地完成，图片和 Base64 数据不会离开你的设备。即使断网也可以正常使用。