# 图片Base64互转教程：图片与Base64字符串双向转换

> 来源：工具派（https://gjupai.com） 原文页面：https://gjupai.com/tutorial/image-base64-guide


![图片](/api/file/download?path=article/202607/1783912598169_9115.png)

![图片](/api/file/download?path=article/202607/1783912611887_278.png)

![图片](/api/file/download?path=article/202607/1783912626713_2694.png)

## 一、工具简介

图片 Base64 互转是一款轻量的在线编码工具，支持两个方向的转换：

- **图片转 Base64**：上传 JPG、PNG、GIF、WebP 等图片，自动生成 Base64 字符串或完整的 Data URL（带 data:image/png;base64, 前缀），可直接嵌入 HTML、CSS、Markdown 或代码中；
- **Base64 转图片**：粘贴一段 Base64 字符串或 Data URL，一键解析还原为图片，支持在线预览和下载为 PNG 文件。

整个转换过程完全在浏览器本地完成，图片不会上传到服务器，隐私安全有保障，转换大图片也非常快。

## 二、第一步：选择转换方向并上传图片

打开工具后，页面顶部有两个方向标签：「图片转 Base64」和「Base64 转图片」，默认停在「图片转 Base64」。

在「图片转 Base64」标签下，点击上传区域选择本地图片，或直接把图片文件拖拽到上传框中。上传成功后页面会显示图片预览、文件名和文件大小，并立即开始转换。

![第一步：选择转换方向并上传图片](/api/file/download?path=article/202607/1783912598169_9115.png)

以上传一张 53.75 KB 的 PNG 封面图为例，上传后不到一秒就生成了 73,414 个字符的 Base64 结果。

## 三、第二步：一键复制 Base64 字符串

转换完成后，结果会显示在右侧的文本框中。页面提供两种输出格式：

- **Data URL**：完整的 data:image/png;base64,xxxx 形式，可直接粘贴到 img 标签的 src 属性或 CSS 的 url() 中使用；
- **纯 Base64**：不含前缀的纯字符串，适合通过接口传输或存入数据库。

点击「复制」按钮即可把结果复制到剪贴板，粘贴到代码编辑器里直接使用。

![第二步：复制 Base64 或 Data URL](/api/file/download?path=article/202607/1783912611887_278.png)

## 四、参数说明

| 参数/控件 | 类型 | 说明 |
| --- | --- | --- |
| 转换方向标签 | 单选切换 | 「图片转 Base64」与「Base64 转图片」二选一，切换后输入区随之变化 |
| 文件上传区 | 文件选择器 | 支持点击选择或拖拽上传，支持 JPG、PNG、GIF、WebP 等常见格式 |
| 输出格式 | 复选/切换 | 可选 Data URL（带前缀）或纯 Base64 字符串 |
| 复制按钮 | 操作按钮 | 一键复制转换结果到剪贴板 |
| Base64 输入框 | 文本域 | 「Base64 转图片」方向下粘贴字符串，支持带或不带 Data URL 前缀 |
| 解析为图片按钮 | 操作按钮 | 点击后校验并还原字符串为图片预览 |

## 五、第三步：Base64 还原为图片

切换到「Base64 转图片」标签，把之前复制的 Base64 字符串（或任意来源的 Data URL）粘贴到左侧文本框，点击「解析为图片」按钮。

解析成功后右侧会显示还原出的图片预览和尺寸信息（实测可正确还原出 1280px 宽的 PNG 原图），确认无误后点击「下载图片」即可保存为 PNG 文件。页面还提供「复制 HTML img」和「复制 CSS 背景」按钮，方便直接生成可用的代码片段。

![第三步：Base64 还原为图片](/api/file/download?path=article/202607/1783912626713_2694.png)

## 六、常见问题

**Q1：转换后的字符串特别长，正常吗？**
正常。Base64 编码后体积约为原图的 1.33 倍，一张几十 KB 的图片就会产生几万字符。Base64 适合小图标、占位图等场景，大图片建议仍用文件方式引用。

**Q2：粘贴 Base64 时必须有 data:image/png;base64, 前缀吗？**
不需要。工具会自动识别带前缀的 Data URL 和纯 Base64 字符串，两种形式都能正确解析。

**Q3：图片会上传到服务器吗？**
不会。编码和解码全部在浏览器本地完成，图片和字符串都不会离开你的电脑。

**Q4：支持哪些图片格式？**
上传支持 JPG、PNG、GIF、WebP 等浏览器可解码的常见格式；还原后的图片统一下载为 PNG。

## 七、总结与相关工具

图片 Base64 互转把「图片 → 字符串 → 图片」的双向转换做成了两步操作，本地处理、即转即得，是前端开发、接口调试和文档内嵌图片时的得力小工具。

相关工具推荐：

- [图片压缩](/tools/image_compress)：图片太大不适合转 Base64？先压缩再编码
- [SVG 转 PNG](/tools/svg_to_png)：矢量图转位图后再转 Base64
- [占位图生成器](/tools/placeholder_image)：快速生成占位图片素材
- [截图美化](/tools/screenshot_beautifier)：给截图加背景边框后再嵌入文档

现在就[立即使用图片 Base64 互转工具](/tools/image_base64)，体验秒级双向转换！