logo
GeekFormat

图片转 Base64

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

支持 PNG、JPG、GIF、WebP

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

相关推荐

Base64 转图片

Base64 转文本

Data URL 转换

JSON 压缩

JavaScript Formatter

URL 解析器

适用场景

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

功能特点

  • 全格式支持：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 文件

使用方法

  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 类型并生成对应的 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 引用的加载速度更快，因为浏览器可以并行下载多个资源并利用缓存。

什么是图片转 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 传输二进制数据、以及浏览器扩展或单文件应用（无法引用外部资源）。