Picovert

如何将图片转换为Base64：完整指南

Picovert 团队2026-02-095 分钟阅读

Base64编码将二进制图片数据转换为纯文本字符串，让你无需引用单独的文件，就能直接将图片嵌入 HTML、CSS、JSON或邮件中。代价是文件大小增加约33% — 一张100KB的图片转换为Base64后约为133KB。 对于小图标和邮件来说非常实用，但对于大图片则效率低下。

什么是Base64编码？

Base64是一种将二进制数据用64个可打印ASCII字符（A–Z、a–z、0–9、+、/）表示的编码方案。每3字节的二进制数据转换为4个Base64字符，因此编码后的 输出总是比原始数据大约33%。

对于图片，通常会添加数据URI方案前缀，以便浏览器知道如何解释它：

data:image/jpeg;base64,/9j/4AAQSkZJRgAB...

这个自包含的字符串可以用在任何接受URL的地方 — <img>的src属性、CSS背景、 JSON字段或邮件HTML正文。

何时使用Base64图片

  • 小图标和内联SVG（小于5KB） — 嵌入小图标可以避免额外的HTTP请求。在图标较多的页面上，这种节省效果会累积。
  • 邮件HTML — 许多邮件客户端（Outlook、某些模式下的Gmail等）会屏蔽外部链接图片。 将图片作为Base64数据URI嵌入可确保它们始终显示。
  • CSS数据URI — 将小型背景图案或精灵图内联到样式表中，使其随CSS在单个请求中加载。
  • JSON API有效载荷 — 当需要通过仅接受JSON的API传输图片时（例如向机器学习端点发送缩略图）， Base64允许在文本字段中包含二进制数据。
  • 单文件HTML文档 — 适用于必须完全自包含、没有外部资源的演示文稿、报告或离线工具。

何时不应使用Base64

  • 大图片 — 33%的大小开销会迅速累积。一张1MB的照片会变成1.33MB的Base64文本， 大幅增加HTML或JSON有效载荷的大小。
  • 需要浏览器缓存的图片 — 浏览器会独立缓存图片文件。Base64嵌入的图片成为HTML或CSS文件的一部分， 无法单独缓存，因此每次页面加载时都需要重新下载。
  • 多页面共用的图片 — 如果同一张图片在10个页面中都以Base64编码，浏览器就需要传输10次完整的编码字符串， 而不是获取一个缓存的文件。
  • 性能关键的页面 — 大型内联数据URI会延迟HTML解析，增加首字节时间，如果嵌入JS文件还会使 JavaScript包变得臃肿。

在线转换

如果图片格式不常见，先使用 Picovert的图片转换器将其转换为JPEG或PNG， 然后粘贴到任意Base64编码工具中（搜索"base64 image encoder"可找到许多免费工具）。 大多数在线工具支持JPG、PNG、GIF、WebP和SVG，并返回可直接粘贴的完整数据URI字符串。

使用JavaScript转换

在浏览器环境中，FileReader API可以读取File或Blob对象，并返回包含Base64有效载荷的数据URI字符串：

const toBase64 = (file) =>
  new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = reject
  })

// 与文件输入框配合使用
const input = document.querySelector('input[type="file"]')
input.addEventListener('change', async () => {
  const base64 = await toBase64(input.files[0])
  console.log(base64) // "data:image/jpeg;base64,..."
})

在Node.js（v18+）中，使用内置的fs模块和Buffer：

import { readFileSync } from 'fs'

const buffer = readFileSync('image.jpg')
const base64 = buffer.toString('base64')
const dataUri = `data:image/jpeg;base64,${base64}`

使用Python转换

Python标准库包含base64模块，无需额外安装包：

import base64

with open("image.jpg", "rb") as f:
    data = base64.b64encode(f.read()).decode("utf-8")

# 构建完整的数据URI
data_uri = f"data:image/jpeg;base64,{data}"
print(data_uri)

根据格式将image/jpeg替换为image/png、image/webp、image/gif等。

使用命令行转换

macOS / Linux — base64命令内置于系统中：

base64 -i image.jpg -o image_base64.txt

Windows PowerShell：

[Convert]::ToBase64String([IO.File]::ReadAllBytes('image.jpg')) | Out-File image_base64.txt

两个命令都将纯Base64字符串（不含数据URI前缀）写入文本文件。在HTML或CSS中使用时， 需要手动添加data:image/jpeg;base64,前缀。

在HTML中使用

将src属性替换为完整的数据URI：

<img
  src="data:image/jpeg;base64,{YOUR_BASE64_STRING}"
  alt="嵌入的图片"
  width="200"
  height="150"
/>

将{YOUR_BASE64_STRING}替换为实际的编码值后，浏览器会像处理 普通图片URL一样解码并渲染它。

在CSS中使用

数据URI适用于任何接受URL的CSS属性，包括background-image：

.icon {
  background-image: url("data:image/png;base64,{YOUR_BASE64_STRING}");
  background-size: contain;
  width: 24px;
  height: 24px;
}

对于消除HTTP请求的节省效果超过大小增加的小图标和重复图案来说最为有效。

编码前先压缩

由于Base64会增加约33%的文件大小，为了尽量减小最终编码字符串的大小，请务必先压缩图片。Picovert的图片压缩器可以在不明显降低质量的情况下 大幅减小JPEG、PNG和WebP的文件大小。将200KB的图片压缩到60KB， 产生的Base64字符串约为80KB，而不是~267KB — 当字符串存在于HTML文档或JSON有效载荷中时， 这是很有意义的差异。

总结：Base64是需要自包含、不依赖服务器的图片时的正确工具 — 特别是邮件HTML、小图标和 API有效载荷。其他情况下，使用普通文件URL保持页面加载速度快并充分利用浏览器缓存。 而且每当使用Base64时，请先压缩图片。