图片转Base64

图片转Base64编码，支持Data URI格式

点击或拖拽图片到此处

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

最大支持 10MB

图片预览
预览
图片信息
文件名 {{ fileInfo.name }}
格式 {{ fileInfo.type }}
尺寸 {{ fileInfo.width }} × {{ fileInfo.height }} px
文件大小 {{ formatFileSize(fileInfo.size) }}
Base64大小 {{ formatFileSize(base64Length) }}
输出格式
Data URI
纯Base64
CSS背景
HTML img标签
转换结果
{{ formattedOutput }}

工具简介

图片转Base64工具可以将图片文件转换为Base64编码字符串，支持Data URI格式。转换后的Base64编码可以直接嵌入到HTML、CSS或JavaScript代码中，无需额外的HTTP请求加载图片。

使用说明

  1. 上传图片：点击上传区域选择图片，或直接将图片拖拽到上传区域
  2. 查看预览：上传后会显示图片预览和详细信息
  3. 选择格式：选择需要的输出格式（Data URI、纯Base64、CSS、HTML）
  4. 复制结果：点击"复制结果"按钮复制Base64编码
  5. 下载文件：可以下载为TXT文件或HTML预览文件

使用场景

  • 内嵌小图片：将小图标、Logo等直接嵌入CSS或HTML，减少HTTP请求
  • 邮件签名：在邮件中嵌入图片，避免图片被屏蔽
  • 离线应用：将图片编码后存储在LocalStorage或IndexedDB中
  • Canvas操作：将图片转为Base64后在Canvas上进行处理
  • 数据传输：通过JSON API传输图片数据

注意事项

  • Base64编码后体积会增加约33%，建议只用于小图片（< 100KB）
  • 大图片转换为Base64会导致HTML/CSS文件过大，影响加载性能
  • Data URI格式的图片无法被浏览器缓存（除非缓存整个HTML/CSS文件）
  • IE8及以下浏览器对Data URI支持有限
  • SVG图片转换为Base64后仍可保持矢量特性

格式示例

Data URI格式：

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

CSS背景图：

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

HTML img标签：

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

相关推荐