图片转Base64：data URI内联图片的方法与利弊

CSS 里看到 background:url(data:image/png;base64,iVBOR...) 就是内联图片。小图标这样做能省一次请求，大图这样做反而拖慢页面。本文讲清边界。

一、data URI 格式

data URI 由协议头和数据组成：data:图片MIME类型;base64,后接Base64字符串。浏览器会把它当作一个图片资源直接渲染，无需额外请求。

二、什么时候用

适合体积在 2KB 至 4KB 以下的小图标、loading 动画、背景纹理。这个体积下省下的 HTTP 请求收益大于体积膨胀的代价。

三、代价

Base64 使体积增大约 33%，且内联图片无法被浏览器单独缓存，也无法被 CDN 缓存。大图内联会让 HTML/CSS 显著变大，首屏变慢。

四、工具用法

打开图片转Base64工具，选择图片后自动生成 data URI 完整字符串，可直接粘贴进 CSS 的 url() 或 HTML 的 img src。全部在浏览器本地完成。