🖼️ 图片转Base64工具

在线将图片转换为Base64编码,支持预览

🔒 图片处理完全在浏览器本地完成,不会上传到服务器

📁

点击或拖拽图片到此处

支持 JPG、PNG、GIF、WebP 等格式

📚 使用说明

什么是 Base64 图片?

Base64 是一种将二进制数据编码为ASCII字符串的方法。图片转Base64后可以直接嵌入到HTML、CSS或JSON中,无需单独的图片文件。

Data URL 格式

data:[MIME类型];base64,[Base64编码数据]

示例:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...
                

使用场景

  • 小图标和Logo嵌入CSS
  • 减少HTTP请求
  • 邮件中嵌入图片
  • JSON API中传输图片
  • Canvas图片导出

HTML 中使用示例

<img src="data:image/png;base64,iVBORw0KGgo..." alt="图片">
                

CSS 中使用示例

.logo {
  background-image: url(data:image/png;base64,iVBORw0KGgo...);
}
                

优缺点

优点:

  • 减少HTTP请求数量
  • 无需单独的图片文件
  • 便于传输和存储
  • 避免跨域问题

缺点:

  • 编码后体积增加约33%
  • 不利于缓存
  • 大图片会影响页面加载
  • 不利于SEO

最佳实践

  • 仅用于小图片(< 10KB)
  • 常用图标适合 Base64
  • 大图片使用 CDN
  • 考虑浏览器缓存策略