跳至正文

图片 → Base64 转换器

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

📁

Click or drag and drop an image here

Supports: JPG, PNG, GIF, WebP (Max 10MB)

About Base64 Images

Base64 encoding converts images into text format that can be embedded directly in HTML, CSS, or JSON. This eliminates the need for separate image files and reduces HTTP requests.

Advantages

  • No additional HTTP requests - faster page load
  • Perfect for small icons and logos
  • Works well in email templates
  • Self-contained HTML files

Disadvantages

  • Increases file size by ~33%
  • Cannot be cached separately by browsers
  • Not suitable for large images
  • Makes code less readable

Best Practices

  • Use for small images (icons, bullets) under 10KB
  • Optimize images before converting
  • Consider SVG for vector graphics instead
  • Use traditional image files for photos

主要功能​

📤 便捷上传​

  • 点击选择文件
  • 支持拖放
  • 支持最大 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 图标
    • 项目符号
    • 小徽标

  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:;

相关工具​

隐私保护​

此工具完全在客户端运行。您上传的图片不会发送到服务器，仅在浏览器中处理。

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

如有任何疑问或改进建议，欢迎随时提供反馈！