图片转 Base64

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

支持 PNG、JPG、GIF、WebP

免费在线图片转 Base64 编码工具，支持 PNG/JPG/WebP/GIF/SVG/BMP/AVIF 等全格式。浏览器 Web Worker 本地处理，零上传，不卡顿。可直接生成 Data URL 用于 CSS 内联、HTML 嵌入、邮件模板和 API 传参。

相关推荐

Base64 转图片

Base64 转文本

Base64 DataURL 转换

JSON 压缩

JavaScript 格式化

URL 解析器

什么是图片转 Base64？

图片转 Base64 是一种将二进制图片数据编码为 ASCII 文本字符串的技术。Base64 使用 64 个可打印字符（A-Z、a-z、0-9、+、/）来表示二进制数据，每 3 个字节转换为 4 个 Base64 字符，末尾用 = 填充。整个编码过程符合 RFC 4648 标准。

**编码原理**：Base64 将每 3 个字节（24 比特）拆分为 4 个 6 比特组，每个 6 比特组对应 Base64 字符集中的一个字符。如果字节数不是 3 的倍数，会在末尾添加 1-2 个 = 填充字符。这解释了为什么 Base64 编码后体积会增加约 33%（4/3 ≈ 1.33）。

**Web Worker 优化**：本工具使用 Web Worker 在浏览器独立线程中执行编码任务，通过 ArrayBuffer.transfer() 将数据零拷贝转移给 Worker，避免主线程阻塞。这意味着即使处理数 MB 的大图片，页面 UI 依然保持流畅响应，同时实时显示编码进度。

**隐私安全**：与需要上传图片到服务器的工具不同，本工具完全在浏览器本地执行。图片数据不经过任何第三方服务器，这在使用敏感图片（如证件、合同）时尤为重要。

**应用场景**：Base64 图片常用于 CSS Sprites（减少 HTTP 请求）、HTML 邮件模板（避免图片被邮件客户端阻止）、API 传输二进制数据、以及浏览器扩展或单文件应用（无法引用外部资源）。

适用场景

  • CSS Sprites：小图标、内联图片内联到 CSS background，减少 HTTP 请求加速首屏渲染
  • HTML 图片嵌入：Logo、占位图、UI 资源直接内联到 HTML img 标签，减少图片请求
  • Email 邮件模板：邮件客户端默认阻止外链图片，Base64 内联确保图片即时显示无需用户授权
  • API 传输：将图片二进制数据转换为 Base64 字符串，嵌入 JSON 请求体进行接口传输
  • 前端性能优化：减少 HTTP 请求数量，适用于首屏关键资源内联加速页面加载
  • 浏览器扩展与单文件应用：无法引用外部资源的场景下，通过 Base64 内联所有图片

使用方法

  1. 选择或拖拽需要编码的图片文件（支持 PNG/JPG/WebP/GIF 等）
  2. 工具自动在浏览器 Web Worker 中将图片转换为 Base64，实时显示编码进度
  3. 查看编码结果：纯 Base64 字符串、完整 Data URL、HTML img 标签任选其一复制
  4. 将结果粘贴到 CSS、HTML、JSON 配置文件或 API 请求中使用

功能特点

  • 全格式支持：PNG、JPG、WebP、GIF、SVG、BMP、AVIF、HEIC/HEIF 等常见图片格式自动识别 MIME
  • Web Worker 加速：大文件编码在独立线程执行，实时显示进度条，不阻塞主线程 UI
  • 浏览器本地零上传：图片通过 ArrayBuffer 零拷贝直接转移给 Worker 处理，数据不经过任何服务器
  • Data URL 自动生成：自动生成 data:image/xxx;base64, 前缀，可直接粘贴到 HTML img 或 CSS 背景属性
  • 双向转换：支持图片转 Base64 和 Base64 转图片两种模式互不干扰
  • 一键复制与下载：支持复制纯 Base64、完整 Data URL、HTML img 标签多种格式，或下载为 .txt 文件

常见问题

支持哪些图片格式？

支持 PNG、JPG、WebP、GIF、SVG、BMP、AVIF、HEIC/HEIF 等常见格式。工具会自动识别 MIME 类型并生成对应的 Data URL 前缀，如 data:image/png;base64,...

Web Worker 加速是什么原理？

Web Worker 是浏览器独立的后台线程。传统图片编码会阻塞主线程导致页面卡顿，本工具将编码任务放到 Worker 线程执行，配合 ArrayBuffer 转移技术和进度回调，保证大文件处理时界面依然流畅。

图片会在服务器上传输吗？

完全不会。转换过程使用 ArrayBuffer 零拷贝技术直接在浏览器 Worker 线程中完成，图片内容不经过任何服务器。这与声称'浏览器处理'但实际有上传行为的工具有本质区别。

Base64 编码后体积会变大多少？

Base64 编码后体积约为原始二进制的 133%，即增大约 33%。这是因为每 3 字节（24 比特）转换为 4 个 Base64 字符（每个 6 比特），末尾用 = 填充。建议内联的单个图片控制在 10KB 以内。

什么样的图片适合 Base64 内联？

建议用于 10KB 以内的小图标、小图片。小图片内联可以减少 HTTP 请求数量，但过大的图片内联会增加 HTML/CSS 体积反而影响加载性能。大图片建议使用独立 URL 引用。

Data URL 和纯 Base64 有什么区别？

Data URL 格式为 data:image/png;base64, 后接 Base64 编码内容，可直接放入 HTML img 的 src 属性。纯 Base64 只是编码后的字符串，需配合 MIME 类型前缀使用。

可以用这个工具做 API 接口联调吗？

可以。将图片转换为 Base64 后，可以作为 JSON 请求体的字段值发送到后端接口。本工具支持一键复制，兼容大多数 API 文档中的示例格式。

为什么选择 Base64 内联而不是普通图片引用？

Base64 内联适合小文件（<10KB）的场景，可以减少 HTTP 请求数量。但对于大图片，独立 URL 引用的加载速度更快，因为浏览器可以并行下载多个资源并利用缓存。