跳转到主内容

图片转 Base64 编码器

将图片文件转换为 Base64 字符串。生成可直接嵌入 HTML、CSS 的 Base64 代码。

📁

点击或拖放图像到这里

支持：JPG、PNG、GIF、WebP（最大 10MB）

关于 Base64 图像

Base64 编码将图像转换为可以直接嵌入 HTML、CSS 或 JSON 的文本格式。这消除了对单独图像文件的需求并减少了 HTTP 请求。

优点

  • 无额外 HTTP 请求 - 页面加载更快
  • 适合小图标和徽标
  • 在电子邮件模板中效果良好
  • 自包含 HTML 文件

缺点

  • 文件大小增加约 33%
  • 无法被浏览器单独缓存
  • 不适合大图像
  • 降低代码可读性

最佳实践

  • 用于 10KB 以下的小图像（图标、项目符号）
  • 转换前优化图像
  • 考虑使用 SVG 代替矢量图形
  • 照片使用传统图像文件

主要功能​

📤 简便上传​

  • 点击选择文件
  • 支持拖放上传
  • 最大支持 10MB

🖼️ 实时预览​

  • 即时预览上传的图片
  • 显示图片信息（大小、分辨率、类型）
  • 计算 Base64 数据大小

💻 代码片段​

  • HTML <img> 标签示例
  • CSS background-image 示例
  • 一键复制功能

💾 导出功能​

  • 复制 Base64 字符串
  • 复制 HTML/CSS 代码

什么是 Base64 编码？​

Base64 是一种将二进制数据转换为文本格式的编码方式。将图片编码为 Base64 后，可以直接嵌入到 HTML 或 CSS 中。

普通图片 vs Base64​

普通方式：

<img src="image.png" alt="图片" />

Base64 方式：

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

优点​

✅ 减少 HTTP 请求​

  • 无需额外下载文件
  • 缩短页面加载时间（针对小图片）

✅ 单文件完整性​

  • 一个 HTML 文件包含所有内容
  • 适合用于 HTML 邮件

✅ 无需 CDN/托管​

  • 不需要图片托管服务器
  • 消除外部依赖

✅ 即用即显​

  • 可立即渲染
  • 无缓存问题（小文件）

缺点​

❌ 文件体积增大​

  • Base64 比原始文件大约增加 33%
  • 不适合大图片

❌ 无法利用浏览器缓存​

  • 每次都随 HTML 一起传输
  • 可重用性降低

❌ 代码可读性下降​

  • HTML/CSS 代码变长
  • 维护困难

❌ 无法使用 CSS 精灵图​

  • 无法使用图片组合技术

何时使用？​

✅ 适用场景​

  1. 图标和小图片（1-10KB）

    • UI 图标
    • 项目符号
    • 小型 Logo

  2. 单文件 HTML

    • 电子邮件模板
    • 离线 HTML 文档
    • 演示文稿

  3. 需要即时显示的情况

    • 首屏内容
    • 重要 UI 元素

❌ 不适用场景​

  1. 大图片（>50KB）

    • 照片
    • 背景图片
    • 横幅广告

  2. 可重用的图片

    • 多个页面使用
    • 频繁更新的图片

  3. SEO 重要的图片

    • 产品图片
    • 博客文章图片

支持格式​

  • JPG/JPEG：适合照片
  • PNG：支持透明背景
  • GIF：支持动画
  • WebP：现代化格式

使用示例​

HTML 图片​

<img
  src="data:image/png;base64,iVBORw0KGg..."
  alt="说明"
  width="100"
  height="100"
/>

CSS 背景​

.element {
  background-image: url('data:image/png;base64,iVBORw0KGg...');
  background-size: cover;
  background-position: center;
}

响应式图片​

<picture>
  <source
    media="(min-width: 768px)"
    srcset="data:image/png;base64,..."
  />
  <img src="data:image/png;base64,..." alt="说明" />
</picture>

优化建议​

1. 压缩图片​

转换为 Base64 前先压缩图片：

  • TinyPNG
  • ImageOptim
  • Squoosh

2. 选择合适的格式​

  • 照片：JPG（有损压缩）
  • 图标：PNG（无损，透明度）
  • 简单图形：SVG（矢量）

3. 调整尺寸​

仅使用所需尺寸：

  • 2x 视网膜屏：原始尺寸的 2 倍
  • 1x：实际显示尺寸

4. 考虑延迟加载​

不直接使用 Base64，而是：

// 仅在需要时加载
const base64 = 'data:image/png;base64,...';
img.src = base64;

安全注意事项​

⚠️ 注意 XSS 攻击​

接收用户上传的图片时：

  • 验证文件类型
  • 限制文件大小
  • 确认 Content-Type

⚠️ CSP（内容安全策略）​

Base64 图片在 CSP img-src 策略中需要：

Content-Security-Policy: img-src 'self' data:;

相关工具​

💬 这个工具对您有帮助吗？​

欢迎随时向我们发送您的反馈或建议！

隐私保护​

所有图片转换都在您的浏览器本地完成，不会上传到任何服务器。