2026-09-07 · 约 6 分钟读完
Base64 图片到底该不该用？前端内嵌的利与弊
Base64 内嵌图片能减少请求数，却会让体积膨胀三分之一。什么时候该用，什么时候坚决别用，一篇讲透。
Base64 到底做了什么
Base64 把二进制数据按每三个字节一组拆成二十四位，再切成四个六位单元，每个单元映射到六十四个字符表中的一个。结果是把任意二进制转换成纯文本，代价是数据长度增长约三分之一。
因为变成了文本，它可以内嵌进 HTML、CSS 和 JSON，不需要单独发起网络请求，这就是它存在的全部意义。
该用的三个场景
满足下列条件的资源，用 Base64 内嵌是有收益的：
- 极小的图标装饰图，通常小于 4KB，此时请求头开销比图片本身还大。
- 必须随 HTML 一起传递的资源，例如邮件正文里的 tracking 像素。
- 需要在 JSON 里携带二进制的场合，例如接口返回的用户头像占位图。
坚决别用的三种情况
第一，任何超过 10KB 的图片。三分之一体积膨胀加上不能并行下载，收益立刻变成亏损。第二，需要被浏览器缓存的公共资源，Base64 内嵌的 CSS 每次改动都会整体失效。第三，需要在多页面复用的图片，会造成重复膨胀。
还有一个常被忽略的点：Base64 字符串无法被 CDN 单独处理，也享受不到图片格式优化链路。