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。