图片转Base64：HTML和CSS中嵌入图片的最佳方式
Base64编码可以将图片转换为纯文本格式，直接嵌入到HTML、CSS或JavaScript中，无需额外的HTTP请求。
什么是Base64图片编码？
Base64是一种将二进制数据转换为文本字符串的编码方式。图片Base64编码后可以直接写在HTML的src属性或CSS的background-image中。
适用场景
小图标（<10KB）：减少HTTP请求，提升页面加载速度。
CSS Sprites替代方案：将多张小图标合并为一个Base64字符串。
邮件HTML：邮件客户端不支持外部资源引用，Base64嵌入是常用方案。
局限性
Base64编码会使图片体积增加约33%。大图不适合用Base64，因为会增加HTML/CSS文件大小，反而拖慢加载速度。一般建议10KB以下的小图标才考虑使用。
如何使用图片转Base64工具
想减少小图请求时，按以下步骤生成嵌入代码：
- 第一步：上传或拖入图片，工具会读取其二进制内容。
- 第二步：选择输出格式，如直接可用的 data URI 或纯编码文本。
- 第三步：复制结果，粘贴到 HTML 的 src 或 CSS 的 url() 中。
常见问题（FAQ）
- Base64 图片能在所有浏览器用吗？
- 能。所有现代浏览器都支持 data URI，IE8 及以上也支持，放心用于主流项目。
- 为什么文件反而变大了？
- Base64 编码体积约为原图的 1.33 倍，所以只适合小图标；大图请继续用普通文件引用。
- 可以直接嵌在 CSS 里吗？
- 可以。写法为 background-image: url("data:image/png;base64,...")，适合做背景小图或占位。
- 转换后图片模糊了吗？
- 不会。Base64 只是编码，不改变像素，解码后与原图完全一致。
小贴士
- 控制体积上限：建议 10KB 以内的图标才转 Base64，超过会让 HTML/CSS 文件臃肿、拖慢首屏。
- 配合构建工具：项目里可用 webpack、Vite 等自动把小图转成 Base64，不必手贴长串编码。