图片转 Base64 完全指南：把图片塞进代码里

把一张图片转成 Base64，本质是把二进制字节翻译成一串只含字母、数字和少数符号的纯文本。翻译完之后，这串文本可以直接写进 CSS、HTML、Markdown 甚至邮件模板里，浏览器读到 data:image/png;base64, 这样的前缀，就知道后面跟着的是一张图，会当场画出来，不再额外去服务器要一次文件。

这件事听起来很绕，但用对场景会很省事，用错场景会拖垮整个页面。这篇把原理、典型用途和取舍一次说清楚。

data URI 长什么样

一个完整的 Base64 图片不是裸字符串，而是一段 data URI，结构固定：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==

这是一张真实的 1×1 透明 PNG。data: 是协议头，image/png 是 MIME 类型，;base64, 说明后面是 Base64 编码，逗号之后才是图片本体。把整段贴进 <img src="...">，浏览器立刻渲染出来，不发任何网络请求。

很多人踩的坑是只复制了逗号后面那一截裸字符串，丢了前缀，结果 <img> 显示一张裂图。要贴就贴完整的 data URI，也就是带 data:image/...;base64, 头的那一整段。

为什么编码后体积会涨约 33%

Base64 用 4 个 ASCII 字符表示每 3 个字节的二进制。4 除以 3 约等于 1.333，所以输出体积固定是输入的 1.333 倍，再加上少量 = 填充和 data:image/png;base64, 前缀。一张 6 KB 的图标编码出来大约 8 KB，一张 200 KB 的图会膨胀到约 267 KB。

这是编码本身的数学特性，跟用哪个工具无关，传输层面也救不太回来。gzip 因为字母表很小还能压一点，但 Brotli 压完的 Base64 仍然比直接传原始二进制配 Content-Type: image/png 大。所以 Base64 只在你需要把图嵌进文本时用，绝不该当成默认的图片分发方式。

几个真正划算的用途

第一类是极小的图标。站点 logo、1×1 占位图、CSS 背景小图标，这些通常只有几 KB。把它内联进已经加载的 CSS 里，就省掉了一次独立的 HTTP 往返，首屏少一个阻塞请求。判断标准很简单：编码后还在 4 KB 以内，基本就划算。

第二类是单文件场景。HTML 邮件在 Outlook 和 Gmail 里往往不准外链图床，事务邮件里的状态图标只能内联进去，靠 <img src="data:image/png;base64,..."> 才能保证转发和离线阅读时都不掉图。离线 HTML、单文件 demo 也是同理，资源没地方托管时，内联是唯一选择。

第三类是 Markdown 和 README。想在 GitHub README 里放个带渐变的小徽章，又不想多维护一个图床链接，把 SVG 编码成 data URI 写进 ![badge](data:...) 就行。

什么时候千万别用

只要图超过几十 KB，就别内联。把一张 200 KB 的主视觉图塞进 HTML，文档凭空胖约 267 KB，而且这部分没法被浏览器独立缓存，每次访问都要重新下载整段 HTML，LCP（最大内容绘制）和 TTFB 都会被拖垮。几百 KB 以上的图，老老实实托管成文件、用普通 URL 引用，配合 CDN 缓存才是正路。

还有一个容易忽略的点：SVG 不一定要走 Base64。data:image/svg+xml,... 这种 URL 编码、不走 Base64 的形式，对 SVG 通常小 20% 到 30%，而且一样能用于 background-image。如果你只是要把矢量图内联，先试纯文本形式，体积更友好，具体可以用 SVG 转 data URI 直接生成。

我自己的习惯

我现在的判断流程很机械：先看图多大。4 KB 以下、又是首屏会用到的小图标，我才考虑内联，而且转完一定盯一眼编码后的体积，确认没超线。其余一律托管。有一次我图省事把一张 30 KB 的插画内联进组件，本地看不出问题，上线后 Lighthouse 直接掉了一分，回滚改成普通 URL 才好。那次之后我就把「编码后体积」当成硬指标看，而不是凭感觉。

全程本地，不上传

图片转 Base64 属于随手用一下的轻量活，不该要求你信任第三方服务器。一个合格的转换器应该用浏览器的 FileReader 在标签页里直接读字节、就地编码，打开 DevTools 的 Network 面板，点编码或解码时请求数应该一直是 0，唯一的网络活动只有页面首次加载。这样既隐私安全，页面缓存后离线也能用。

需要双向互转的话，直接用 Base64 图片转换器：拖进 PNG、JPG、WebP、SVG，立刻拿到裸 Base64、完整 data URI，以及 CSS、HTML、Markdown 三种现成片段，反向粘 data URI 还能解码出预览并下载原文件。如果你要编码的不是图片而是普通文本或任意字节，那用 Base64 编码器更合适。

记住一句话就够了：Base64 是把图片塞进文本的手段，不是省流量的手段。小图内联省一次请求，大图内联赔一次性能，分清这条线，就不会用错。

Made by Toolora · Updated 2026-06-13