图片转 Base64

什么是 Base64？

Base64 是一种二进制到文本的编码方案，使用一组 64 个可打印的 ASCII 字符来表示二进制数据：大写字母 A–Z、小写字母 a–z、数字 0–9、加号（+）和正斜杠（/），等号（=）用于末尾的填充。每三个字节的二进制输入被编码为四个 Base64 字符，这意味着编码后的输出比原始二进制大约大 33%。Base64 最初在 RFC 2045 中为 MIME 邮件附件定义，如今在二进制数据需要通过纯文本通道传输时被广泛使用，例如 JSON、XML、HTML、CSS、JavaScript 源代码或 Data URL。

由于 Base64 输出是纯文本，可以安全地嵌入源代码文件中、通过剪贴板复制、在 HTTP 请求中发送，并与其他文本字段一起存储在数据库中，无需任何二进制转义。对于图像而言，将文件编码为 Base64 让您可以直接将整个图像内联到 HTML、CSS 或 JavaScript 文件中，从而省去为获取图像资源而发起的单独 HTTP 请求。

为什么要将图片转换为 Base64？

将图片转换为 Base64 字符串有多个实际原因。最常见的是减少网页加载所需的 HTTP 请求数——浏览器不再需要单独请求一个 .png 或 .jpg 文件，而是将图像数据直接嵌入 HTML 或 CSS 中。其他用例包括将图像嵌入 JSON 或 XML 负载、将图标和小型图形存储在源代码中、以及为电子邮件、富文本编辑器或单文件 HTML 文档准备图像。

Base64 对小图像特别有效，例如图标、徽标、项目符号和装饰性 UI 图形，因为这些场景下额外 HTTP 请求的开销可能超过编码带来的体积损失。对于较大的照片，这种权衡就不那么有利了，因为编码后的字符串比原始二进制大约大 33%，且无法被浏览器单独缓存。

何时使用 Base64 图片

在许多情况下，将图像内联比作为单独文件提供更方便或更高效，此时将图像转换为 Base64 是合理的选择。最常见的场景包括：

• 内联 CSS 背景图。小型背景图形和纹理可以作为 Data URL 直接嵌入 CSS，省去额外请求。
• HTML 邮件签名与内容。许多邮件客户端默认屏蔽外部图像；内联 Base64 图像可确保立即显示。
• 单文件 HTML 交付物。需要作为单个 .html 文件分享的报告、仪表板和原型可以将每张图片内联。
• JSON 和 XML 负载。当多部分表单上传不便时，接受图片上传的 API 通常接受 Base64 字符串字段。
• 源代码图标。组件或库使用的小图标可以存储为 .js 或 .ts 文件中的 Base64 字符串。
• 首屏关键图形的懒内联。关键的英雄图像或徽标可以内联，在首次绘制时渲染而无需等待网络往返。

对于浏览器缓存、CDN 分发和懒加载至关重要的较大照片，请避免使用 Base64——将这些图像保留为单独的图像文件并通过普通 URL 提供。

如何将图片转换为 Base64

使用此工具将图像转换为 Base64 只需几秒钟，并且完全在浏览器中完成。无需上传、无需注册、无需安装。工具使用 FileReader API 读取文件，并输出 Data URL 或纯 Base64 字符串。请按以下四步操作：

1. 上传图片。点击上传区或将 .jpg、.png、.webp、.gif、.bmp 或 .svg 文件拖放到此处。图像将在本地解码并显示为预览。
2. 选择输出格式。选择"Data URL"可获得可直接放入 HTML 或 CSS 的字符串，或选择"纯 Base64"可获得不含 data: 前缀的原始编码字符串。
3. 转换为 Base64。点击"转换为 Base64"按钮。Base64 文本将出现在结果区，方便查看。
4. 复制或下载。使用"复制到剪贴板"将字符串粘贴到您的代码中，或使用"下载 .txt"将其保存为文本文件。

由于每一步都使用 JavaScript 在浏览器中本地运行，您的图像永远不会被上传到服务器。这使得转换完全私密、快速，并适合敏感或机密的图像。

Data URL 与纯 Base64

这两种输出格式服务于不同目的。理解它们的差异有助于您为用例选择正确的一种。

• Data URL (data:image/png;base64,...)——一个完整的 URL 方案，包含 MIME 类型和 Base64 负载。您可以将其直接粘贴到 <img> 标签的 src 属性、CSS 的 url() 中，或浏览器地址栏中。这是在 HTML 和 CSS 中内联使用最方便的形式。
• 纯 Base64 (iVBORw0KGgo...)——仅 Base64 编码的字节，没有 data: 前缀或 MIME 类型。当消费应用程序已知内容类型并添加自己的前缀时（例如向 API 端点发送数据或在工作流中存储原始编码数据），请使用此形式。

经验法则：当您希望将图像直接嵌入标记或样式表时选择 Data URL；当您将图像数据发送到 API 或使用期望原始编码字符串的系统时选择纯 Base64。