Base64 与 Data URI 怎么用
Base64 把二进制图片编码成纯文本，好处是可以直接嵌进 HTML、CSS 或 JSON，省去一次网络请求。加上前缀就得到完整的 Data URI：
background-image:url("data:image/png;base64,iVBORw0KGgo…")
注意编码后体积约增大 1/3，且无法被浏览器单独缓存，因此只适合小图标、雪碧图或临时调试；大图仍应使用独立文件。
常见问题
为什么编码后的字符串比原图大？
Base64 用 4 个可打印字符表示 3 个字节，理论膨胀率约 33%。若图片本身已是压缩格式（JPG/WebP），编码不会二次压缩，只会变大。
图片会上传到服务器吗？
不会。文件通过浏览器的 FileReader 在本地读取，页面没有任何上传请求。可以在开发者工具的网络面板确认。
支持 SVG 和 GIF 吗？
支持。选择任意 image/* 文件都会按 MIME 类型生成对应前缀，例如 data:image/svg+xml;base64,…。SVG 若为纯文本，也可以直接内联而无需 Base64。
适用场景
- 把小图标内嵌进样式表，减少一次请求
- 写邮件模板或小程序时图片没法外链，只能用编码
- 生成头像占位图，避免加载时闪一下
- 在线编辑器里粘贴图片，绕过上传限制
注意事项
- 编码在浏览器本地完成，图片不会上传，但关闭页面后结果就没了，记得及时复制。
- 超过几兆的图片会让编码字符串变得极长，粘进 CSS 或 HTML 可能拖慢页面加载。
- Base64 比原文件大约三成，它不是压缩手段，只适合内联小图标和装饰图。
- GIF 和 SVG 也能编码，但 SVG 属于文本格式，直接粘贴源码通常更省事。
- 复制时别漏掉开头的 data:image/png;base64, 前缀，否则浏览器无法识别成图片。