图片Base64转换 - 在线图片与Base64互转

在线图片Base64转换工具,支持将PNG、JPG、GIF等图片转换为Base64编码的Data URI字符串,也可将Base64字符串还原为图片预览和下载,所有处理在浏览器本地完成。


📁
点击选择图片或拖拽图片到此处
支持 PNG、JPG、GIF、WebP、SVG、BMP 等格式

功能特性

全面的图片Base64转换能力

📸
图片转Base64
支持拖拽上传或点击选择图片,自动生成Base64 Data URI、HTML代码和CSS代码
🎨
Base64转图片
粘贴Base64字符串即可预览图片,支持下载保存,自动识别图片格式
📄
多格式支持
支持PNG、JPG、GIF、WebP、SVG、BMP、ICO等所有常见图片格式的转换
📋
代码生成
自动生成可直接使用的HTML img标签和CSS background代码,复制即可嵌入项目

如何使用图片Base64转换

两种转换方式任选

1
图片转Base64
点击上传区域选择图片或拖拽图片到上传区,自动生成Base64字符串、HTML和CSS代码
2
Base64转图片
切换到"Base64转图片"标签页,粘贴Base64字符串,点击"转换为图片"预览和下载
3
复制或下载
图片转Base64可复制字符串/代码;Base64转图片可直接下载保存为图片文件

使用建议

合理使用图片Base64嵌入

适合使用
小图标(10KB以下)、邮件模板中的图片、减少HTTP请求、CSS Sprites替代方案
不建议使用
大尺寸图片(体积增大33%)、需要浏览器缓存的图片、频繁更换的图片资源
📈
体积参考
1KB图片 → 1.3KB Base64;10KB图片 → 13KB Base64;100KB以上建议使用图片链接
💡
最佳实践
小图标用Base64嵌入CSS减少请求数,大图用CDN外链并开启浏览器缓存,性能最优

常见问题

图片Base64转换的常见疑问

图片转Base64有什么用?
图片转Base64后可以生成Data URI,直接嵌入HTML的img标签或CSS的background属性中使用,不需要额外的图片文件和HTTP请求。适用于:(1) 小图标嵌入减少请求数;(2) 邮件模板中确保图片显示;(3) 单文件HTML页面;(4) Canvas图片导出。
什么格式的图片可以转Base64?
所有常见图片格式都支持转换为Base64,包括PNG、JPG/JPEG、GIF(含动图)、WebP、SVG、BMP、ICO等。转换后的Data URI会包含正确的MIME类型前缀(如data:image/png;base64,),确保浏览器能正确识别和显示图片。
图片转Base64后字符串会很长吗?
是的,Base64编码后体积约增大33%。一张10KB的图片转为Base64约13KB字符串(约13000个字符)。因此建议只对小图片(一般建议10KB以下)使用Base64嵌入,大图片使用传统的图片URL链接方式加载,可以利用浏览器缓存,性能更好。
Base64字符串能转回图片并下载吗?
可以。切换到"Base64转图片"标签页,将Base64字符串(可以带或不带data:image/xxx;base64,前缀)粘贴到输入框,点击"转换为图片"即可预览。确认无误后点击"下载图片"按钮即可保存为图片文件。工具会自动根据Base64数据识别图片格式。

相关工具

Base64工具 - 更多实用工具