把图片转成 Base64 嵌进代码，这种做法在前端圈争论了十几年。有人说「省请求，快！」，有人说「体积大，慢！」。真相在两个极端之间。
速工具 的图片转 Base64 工具支持 JPG/PNG/SVG/GIF 转 Data URL，也支持把 Data URL 还原成图片，纯本地处理。
Base64 图片是什么
Base64 编码把二进制图片数据变成一串 ASCII 字符，可以直接写进 HTML 或 CSS：
// HTML 里
// CSS 里
.bg { background: url(data:image/png;base64,iVBORw0KGgo...) }这样做的好处是不用额外发 HTTP 请求去拉图片文件。
优缺点对比
| 优点 | 缺点 | |
|---|---|---|
| HTTP 请求 | 减少请求数（适合小图） | — |
| 文件体积 | — | Base64 比原图大约 33% |
| 缓存 | — | 不能独立缓存，随 HTML/CSS 一起加载 |
| HTTP/2 | — | HTTP/2 多路复用下，减少请求的优势不明显 |
什么时候该用
- 小图标（< 2KB）：转成 Base64 嵌进 CSS，减少请求，体积增加可以接受
- Email HTML 模板：邮件客户端可能不会加载外部图片，内联 Base64 能保证显示
- 离线应用：把图片数据存在本地数据库，需要时直接显示
- SVG 图标：SVG 本身是文本，Base64 后可以直接嵌进 CSS
什么时候别用
- 大图片（> 10KB）：体积膨胀 33%，而且不能缓存，得不偿失
- 需要频繁更新的图片：改一张图要重新编码、重新部署
- 高清照片：体积太大，页面加载反而更慢
在线转换步骤
- 打开 图片转 Base64 工具。
- 上传图片（或拖入页面）。
- 选择输出格式（纯 Base64 / 完整 Data URL / CSS background 格式）。
- 复制结果，粘贴到代码里。
FAQ
Base64 图片对 SEO 有影响吗？
Google 能识别 Base64 图片并索引，但建议同时加 alt 属性。另外，Base64 图片会使 HTML 文件变大，可能影响首屏加载速度，Core Web Vitals 会受影响。
怎么把 Base64 还原成图片？
用同一个工具，「Base64 → 图片」模式，粘贴 Data URL，点击转换就能下载原图。也可以直接在浏览器地址栏输入 Data URL，图片会直接显示。