还在用 URL 传小图片？Base64 才是 API 设计的性能利器

本文已收录在Github，关注我，紧跟本系列专栏文章，咱们下篇再续！

• 🚀 魔都架构师 | 全网30W技术追随者
• 🔧 大厂分布式系统/数据中台实战专家
• 🏆 主导交易系统百万级流量调优 & 车联网平台架构
• 🧠 AIGC应用开发先行者 | 区块链落地实践者
• 🌍 以技术驱动创新，我们的征途是改变世界！
• 👉 实战干货：编程严选网

1 咋在文本世界传输二进制数据？

HTTP协议、JSON、HTML、CSS这些都是基于文本。设计初衷是传输字符如 'A', 'B', 'C', '1', '2', '3'。而一张图片（JPG、PNG or GIF）本质是二进制数据，它包含大量在标准文本协议中无法直接表示的字节，如 0x89, 0x50, 0x4E, 0x47 (PNG文件头)。

直接将这些二进制数据塞进一个 JSON 字符串，很可能因遇到非法的控制字符导致解析失败。好比你想把一瓶水（二进制数据）装进一个只能放信件（文本数据）的信封里，直接倒是倒不进去的。需"转换"步骤。Base64 编码就是这"转换器"。

2 啥是Base64？

一种编码方式，而非加密算法。

核心作用

将任意二进制数据转换成一串由64个常见、可打印的 ASCII 字符组成的文本字符串。这64个字符通常是 A-Z, a-z, 0-9, +, /。

工作原理

它将每 3 个字节的二进制数据（3 * 8 = 24位）拆分成 4 组，每组 6 位。由于 2^6 = 64，所以每一组 6 位的数据都可以用一个预定义的 ASCII 字符来表示。这样，3 个字节的二进制数据就变成 4 个字符的文本数据。这个过程保证转换后的字符串是"纯文本"，可安全在任何文本协议或格式中传输，不引起任何歧义。

3 为啥后端要用 Base64 编码图片？

Captcha.java 中，getBase64ByteStr() 方法就是这个过程的核心。将内存中生成的验证码图片（二进制数据）转换成了 Base64 字符串。这么做的关键优势：

3.1 减少 HTTP 请求，提升性能

通常，浏览器显示一张图片需要发起一次独立的 HTTP 请求：

<!-- 传统：需一次 HTML 请求 + 一次图片请求 -->
<img src="/api/getCaptchaImage?id=123">

每次 HTTP 请求都有其开销（TCP 握手、HTTP 头部等），像验证码、小图标这类体积很小的图片，请求的开销甚至可能比图片本身的数据量还大。若一个页面有几十个这样小图标，就产生几十次额外 HTTP 请求，严重影响加载速度。

而用 Base64，图片数据可直接**嵌入（Embed）**到 HTML 或 JSON 响应中，浏览器无需再为这张图片发起新的请求。

3.2 简化数据传输，实现数据原子性

很多场景下，API需一次性返回结构化数据和图片。如一个获取验证码的接口：

• 不仅要返回图片
• 可能还要返回一个用于后续验证的唯一ID

若不用 Base64，API设计会很复杂：

• 方案A（两次请求）：前端先请求一个接口获取 captchaId，再用这 ID 去请求另一个接口获取图片。增加前端逻辑复杂度和请求次数
• 方案B（复杂响应）：后端用 multipart/form-data 格式，在一个响应里同时返回 JSON 部分和图片二进制部分。服务端和客户端处理起来都麻烦

而用 Base64，一切都变得简单。后端直接返回一个 JSON 对象，图片数据作为其中的一个字符串字段：

{
  "success": true,
  "data": {
    "captchaId": "a1b2-c3d4-e5f6-g7h8",
    "captchaImage": "data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAyCAY..." // Base64 字符串
  }
}

前端一次请求就能拿到所有需要的数据，实现数据传输的原子性，极大简化前后端交互。

3.3 数据封装与可移植性

图片以 Base64 形式嵌入后，数据是自包含的。如可将一个包含 Base64 图片的 HTML 文件保存到本地，断网后打开，图片依然能够正常显示，因为它就是文件的一部分。

4 前端咋解码并显示图片？

前端神奇之处，也最易让人误解。前端开发者几乎无需手动进行任何"解码"操作。这个工作由浏览器自动完成，关键在 Data URI Scheme 技术。

4.1 Data URI Scheme 规范

Captcha#getBase64ByteStr()方法中：

return "data:image/jpg;base64," + s;

这正是 Data URI 的标准格式：

data:[<mediatype>][;base64],<data>

• data:：协议头，告诉浏览器这是一个 Data URI
• image/jpg：MIME 类型 (Media Type)。这部分至关重要，它告诉浏览器这段数据应该被解释成一张 JPG 格式的图片。如果是 PNG，就是 image/png
• ;base64：一个标志，明确告诉浏览器后面的数据是经过 Base64 编码的
• ,：分隔符
• <data>：真正的 Base64 编码字符串

4.2 前端实践

当浏览器在 <img> 标签的 src 属性或 CSS 的 url() 中看到 data: 开头的字符串时，它会自动执行以下操作：

1. 识别出这是一个 Data URI。
2. 读取 MIME 类型（如 image/jpg）
3. 看到 ;base64 标志，自动对后面的数据进行 Base64 解码，将其还原成原始的二进制数据
4. 根据 MIME 类型，将解码后的二进制数据渲染成一张图片

前端代码示例

假设前端通过 fetch 调用后端的验证码接口：

// 1. 获取 DOM 元素
const captchaImgElement = document.getElementById('captchaImage');
const captchaIdInput = document.getElementById('captchaId');

// 2. 发起 API 请求
fetch('/api/captcha')
  .then(response => response.json())
  .then(result => {
    if (result.success) {
      // 3. 将返回的 Base64 字符串直接赋值给 <img> 的 src 属性
      // 浏览器会自动完成解码和渲染！
      captchaImgElement.src = result.data.captchaImage;

      // 保存 captchaId 用于后续提交
      captchaIdInput.value = result.data.captchaId;
    }

  })
  .catch(error => console.error('Error fetching captcha:', error));

HTML 部分可能长这样：

<img id="captchaImage" src="" alt="验证码加载中...">
<input type="hidden" id="captchaId">

前端代码非常直观，完全不涉及复杂解码逻辑。

5 总结

特性	Base64 编码	传统 URL 链接
HTTP请求	无额外请求，嵌入在主文档中	需要一次独立的 HTTP 请求
数据大小	编码后体积增大 约33%	原始二进制大小
浏览器缓存	无法独立缓存，随主文档缓存	可被浏览器独立、高效地缓存
适用场景	小体积、不常变动、需要原子性传输的图片（验证码、图标）	大体积、需要被缓存、被多处引用的图片（文章配图、背景图）

Captcha.java 中使用 Base64 是一种非常明智和高效的设计。对于验证码这种"一次性"、体积小、且需要和 captchaId 捆绑返回的场景，Base64 的优势（减少请求、简化交互）远大于其劣势（体积增大）。而对于网站的大背景图、用户上传的相册等，则应该使用传统的 URL 链接方式，以充分利用浏览器缓存，并避免传输大量冗余的 Base64 文本。

本文由博客一文多发平台 OpenWrite 发布！