🖼 图片转Base64
本地转换 · 不上传服务器 · 图片预览 · 一键复制
📁
拖拽图片到此处 或 点击上传
本地转换 · 不上传服务器 · 图片预览 · 一键复制
可以将小图片直接嵌入HTML或CSS中，减少HTTP请求数。适合小图标、LOGO等。注意Base64比原图大约33%。
是的！转换完全在浏览器本地完成，图片不会上传到任何服务器，确保数据安全。
支持所有浏览器能识别的图片格式：JPEG、PNG、GIF、WebP、BMP、SVG等。
Base64用64个可打印字符表示二进制数据，每3字节变成4字符，体积约为原图的4/3，即大约增大33%。所以只适合小图内联。
适合很小的图片（如几十个字节的小图标、1x1占位图、字体图标），且该图要被多处使用或频繁加载。大图用Base64反而拖慢首屏。
大图、高清照片、需要缓存到CDN的图、会变化的图都不适合。Base64无法单独缓存、无法懒加载、会让HTML/CSS文件异常臃肿。
Data URI是完整的「data:image/png;base64,xxxxx」格式，可直接用于img的src；纯Base64只是逗号后面的那串编码，需要自己拼前缀。本工具两种都提供。
超大图片（几十MB）在浏览器本地编码会占用较多内存和时间，可能卡顿。建议先压缩图片再转换，或避免对超大图使用Base64内联。
Data URI是嵌入资源的统一格式，图片Base64就是其中最典型的一种。理解它的结构，才能正确拼接和使用。
格式：data:[MIME类型];base64,[编码数据]。例如 data:image/png;base64,iVBORw0KGgo...
| 格式 | MIME类型 | 场景 |
|---|---|---|
| PNG | image/png | 图标/透明图 |
| JPEG | image/jpeg | 照片 |
| GIF | image/gif | 动图/简单图 |
| WebP | image/webp | 现代网页/更小体积 |
| BMP | image/bmp | 位图 |
| SVG | image/svg+xml | 矢量图/图标 |
Base64把任意二进制数据编码成由64个字符（A-Z、a-z、0-9、+、/）组成的文本。每3个字节(24位)拆成4组6位，每组对应一个Base64字符。
经验法则：图片小于10KB且使用频率高，才值得用Base64内联。
| 原图大小 | Base64大小 | 增大比例 | 是否适合内联 |
|---|---|---|---|
| 1KB | 约1.33KB | +33% | 很适合 |
| 5KB | 约6.67KB | +33% | 适合 |
| 10KB | 约13.3KB | +33% | 临界，谨慎 |
| 50KB | 约66.7KB | +33% | 不建议 |
| 100KB | 约133KB | +33% | 不建议 |
| 1MB | 约1.33MB | +33% | 坚决不用 |
| 图片格式 | MIME | 完整前缀 |
|---|---|---|
| PNG | image/png | data:image/png;base64, |
| JPEG | image/jpeg | data:image/jpeg;base64, |
| GIF | image/gif | data:image/gif;base64, |
| WebP | image/webp | data:image/webp;base64, |
| SVG | image/svg+xml | data:image/svg+xml;base64, |
| BMP | image/bmp | data:image/bmp;base64, |
1. 点击上传区域选择图片或拖拽图片到此处。
2. 查看图片预览和Base64编码。
3. 复制data URI或纯Base64字符串。