我需要哪个图片工具
| 你的任务 | 工具 |
|---|---|
| 任意图片转 Base64 或 data URI | 图片转 Base64 |
| 粘贴 Base64 查看图片 | Base64 转图片 |
| Logo、截图、透明图片 | PNG 转 Base64、Base64 转 PNG |
| 照片 | JPG 转 Base64、Base64 转 JPG |
| 更适合 Web 的小文件 | WebP 转 Base64、AVIF 转 Base64、Base64 转 WebP |
| 动图 | GIF 转 Base64、Base64 转 GIF |
| CSS 中的矢量图标 | SVG 转 Base64,或通常更短的 SVG data URI |
| 安全地查看 Base64 中的 SVG | Base64 转 SVG |
| 内联 favicon | Favicon 转 data URI、Base64 转 ICO |
| iPhone 照片、扫描件、老式位图 | HEIC 转 Base64、TIFF 转 Base64、BMP 转 Base64、Base64 转 BMP |
各个编码器共用同一组输出:纯 Base64、data URI、CSS background-image、带宽高的 HTML <img>、Markdown,以及包含名称、类型和大小的 JSON 对象。可以一次拖入多个文件,也可以用 Ctrl+V 粘贴截图。
编码前先选好格式
Base64 会让每张图片增大三分之一,所以最终长度主要由格式决定。
- PNG:适合扁平图形、UI 元素,以及任何带透明或文字的图片。
- JPEG:适合照片,用 PNG 会大好几倍。
- WebP:目标支持时,上述两种情况都适用;它通常是三者中最小的。
- SVG:适合矢量绘制的图标和 Logo。作为 URL 编码的 data URI,它往往比 Base64 更短,SVG data URI 工具会把两者并排比较。
- HEIC 和 TIFF 会按原样编码。大多数浏览器无法显示它们,所以如果结果要在网页中显示,请先转为 JPEG 或 PNG。
识别图片的 Base64
| 前缀 | 格式 |
|---|---|
iVBORw0KGgo | PNG |
/9j/ | JPEG |
R0lGODlh / R0lGODdh | GIF |
UklGR | RIFF 容器:WebP,也可能是 WAV 音频 |
PHN2Zy / PD94bWwg | 以 <svg 或 <?xml 开头的 SVG |
AAABAA | ICO |
Qk | BMP |
完整的 data URI 会在前面加上 MIME 类型,例如 data:image/png;base64,iVBORw0KGgo…。解码器两种形式都接受,连同周围 CSS 或 HTML 一起粘贴的字符串也可以。如果字符串最终发现不是图片,Base64 转文件 能识别其他格式,文件工具 则涵盖 PDF、音频、视频和文档。
常见问题
怎样判断 Base64 字符串里是哪种图片格式?
看开头几个字符:iVBORw0KGgo 是 PNG,/9j/ 是 JPEG,R0lGOD 是 GIF,UklGR 是 WebP 之类的 RIFF 容器,PHN2Zy 或 PD94bWwg 通常是 SVG。Base64 转图片 会自动识别类型。
编码前可以先缩小图片吗?
可以。PNG、JPG、WebP、GIF、BMP 和 AVIF 转换器以及通用图片编码器都能把图片缩放到指定的最大宽度,用质量滑块重新编码为 PNG、JPEG 或 WebP,并移除 EXIF 元数据,全部在浏览器中完成。
小图标应该内联为 Base64 吗?
只有几个小图标时,内联可以减少请求。较大的图片还是作为文件更好:Base64 会让体积增加三分之一,而且数据无法与页面分开缓存。具体数字见 data URI 的性能。