图片转 Base64：为什么要把图片嵌入网页

正常情况下，网页里的图片是一个独立文件，浏览器加载 HTML 时遇到 <img src="logo.png">，会再发一次 HTTP 请求去把 logo.png 拉回来。把图片转成 Base64，相当于把图片的数据直接写进 HTML 或 CSS 里，变成一长串文本字符，浏览器读到这一行就能直接画出来，不用再跑一趟。

速工具 的图片转 Base64 工具可以在本地把 JPG、PNG、SVG、GIF 转成 Data URL，也能反向把 Base64 还原成图片。

为什么要把图片转成 Base64

核心动机就一个：减少 HTTP 请求。

浏览器加载网页时，每发一个请求都要经过 DNS 查询、TCP 握手、TLS 协商（如果是 HTTPS）、等待响应这一串步骤。哪怕图片只有几百字节，请求本身的 overhead 也省不掉。如果一个页面有二三十个小图标，每个都单独请求，光排队等待就要花不少时间。

把这些小图直接嵌进 CSS 里，它们会跟着 CSS 文件一起到达浏览器，不走单独的请求。对于首屏渲染来说，少一轮往返就意味着用户能更快看到完整的页面。

Base64 编码后图片变大了多少

Base64 的原理是把每 3 个字节的数据用 4 个 ASCII 字符来表示，所以编码后的体积是原来的 4/3，大约增加 33%。

举个例子，一张 1KB 的 PNG 图标，转成 Base64 后大约变成 1.33KB。听起来还好。但如果是一张 100KB 的照片，就会膨胀到 133KB，而且这个 133KB 是写死在 HTML 里的，没法被浏览器单独缓存——每次刷新页面都要重新下载一遍。

不过有个缓冲因素：如果图片是大面积纯色（比如纯色小图标），Base64 字符串里会有大量重复字符，经过 gzip 或 brotli 压缩后实际传输体积会小不少。所以"增加 33%"是压缩前的数字，实际增幅看图片内容。

什么场景适合用 Base64 图片

• 小图标（2KB 以内）：网页里那些小箭头、小 logo、装饰性的小图标，转成 Base64 嵌进 CSS，省掉一堆请求，体积增幅也无所谓。
• HTML 邮件模板：很多邮件客户端默认不加载外部图片，用户还得手动点"显示图片"。把图片内联成 Base64，打开邮件就能直接看到，体验好很多。
• 单文件 HTML：做 demo、组件文档、离线分享的页面时，把图片嵌进去，一个 HTML 文件就能独立运行，不用带一堆附件。
• Data URI 内联：有些场景下你没法托管图片文件（比如某些沙箱环境），Base64 是唯一的办法。
• SVG 图标：SVG 本身就是文本格式，转成 Base64 后可以直接塞进 CSS 的 background 里，比单独引文件更省事。

什么场景不适合

• 大图片（超过 10KB）：照片、banner、大背景图，转成 Base64 后体积膨胀明显，还拖累 HTML 的解析速度。
• 频繁更新的图：图片内容经常变的话，每次改图都要重新编码、重新部署 HTML，维护成本高。而独立图片文件只要换个文件，浏览器缓存还能复用。
• 需要被多页面共享的图：独立的图片文件可以被浏览器缓存后给所有页面复用，嵌成 Base64 的话每个页面都要带一份，反而更浪费。

CSS 中怎么使用 Base64 图片

转好之后，拿到的字符串大概长这样：data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...。前面是 MIME 类型和声明，逗号后面才是真正的图片数据。

在 CSS 里最常见的用法是做背景图：

.icon-search {
    width: 16px;
    height: 16px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...) no-repeat center;
    background-size: contain;
}

也可以用在伪元素的 content 上，做一些纯装饰的小图标：

.tooltip::after {
    content: url(data:image/png;base64,iVBORw0KGgo...);
    position: absolute;
    top: -8px;
    right: -8px;
}

直接写在 HTML 的 img 标签里也行：

<img src="data:image/png;base64,iVBORw0KGgo..." alt="logo">

有两个细节要注意：第一，MIME 类型别写错，PNG 是 image/png，JPG 是 image/jpeg，SVG 是 image/svg+xml，写错了部分浏览器不认。第二，别在 Base64 字符串里手动加换行，有些浏览器会把换行当成字符串结束，图片就裂了。

常见问题 FAQ