图片转 Base64 在线转换器

如何把图片转为 Base64

1. 把图片拖到框中，用 Ctrl+V（Mac 上是 Cmd+V）从剪贴板粘贴，或使用文件选择器。截图可以直接从剪贴板粘贴；一次处理多个文件也没问题。
2. 可以先缩小或转换格式：在 最大宽度 中输入像素值，在 转换为 中选择 PNG、JPEG 或 WebP，设置 质量，或勾选 移除元数据（EXIF）。
3. 在 输出为 中选择格式。此页默认是 Data URI。
4. 按 复制输出；结果很长时可以按 另存为 .txt。

预览会显示文件名、大小、MIME 类型和像素尺寸。按钮下方显示输入大小、输出大小和额外开销的百分比，粘贴之前就能心里有数。

输出格式及其用途

每种格式中的 Base64 数据都相同，变的只是外面的包装。下面的示例使用一张名为 logo.png 的 32×32 PNG，内容已缩短：

<img> 输出包含 width 和 height，浏览器可以在图片解码前预留空间。有些 Markdown 渲染器（尤其是托管平台上的）会从图片中去掉 data: URL，依赖 Markdown 输出之前请先确认你用的渲染器。

编码前先缩放和转换

无论输入什么，Base64 都会让体积增加三分之一，所以想得到短字符串，最好的办法是用更小的图片。一张以 300 像素缩略图显示的手机照片，并不需要原始的 4000 像素。把 最大宽度 设为 600，即显示尺寸的两倍，足以在高 DPI 屏幕上保持清晰，省下的空间远超任何编码技巧。

各选项的作用：

• 最大宽度 只会缩小。更窄的图片保持原尺寸，宽高比始终不变。
• 转换为 JPEG 会把透明区域填成白色，因为 JPEG 没有 alpha 通道。既要透明又要体积小，请用 WebP。
• 质量 适用于 JPEG 和 WebP 输出，只要其他选项触发了重新编码就会生效。PNG 是无损格式，会忽略它。
• 移除元数据（EXIF） 会去掉 GPS 坐标、设备型号和拍摄时间等相机数据。它的原理是重绘图片，所以 JPEG 会按所选质量再压缩一次。
• 选择 保持原格式 重新编码时，GIF、BMP 和 AVIF 会输出为 PNG，因为浏览器无法从 canvas 生成这些格式。GIF 动图只保留第一帧。
• Safari 无法编码 WebP。如果在 Safari 中选择 WebP，工具会提示改为生成了 PNG。
• SVG 文件按原样编码。它本身就是文本，把矢量图栅格化就失去了它的意义。

已经被优化工具压缩过的 PNG，重新编码后可能反而变大。预览会把新大小显示在原大小旁边，复制前请对比一下。

什么时候该内联图片，什么时候不该

data URI 能省掉一次 HTTP 请求，并让所有内容集中在一个文件中。以下情况值得这样做：

• 几 KB 大小的图标、Logo 和小型 UI 图形，
• 单文件 HTML 文档，例如报表、离线文档或导出的仪表盘，
• 真实图片加载期间显示的模糊小占位图，
• 不方便使用单独文件的测试数据和 JSON 载荷。

对于照片和任何大图，它反而有害。编码后的副本大约大 33%，无法与包含它的 HTML 或 CSS 分开缓存，而且每个嵌入它的页面都要重新下载一遍。样式表中的图片还会拖慢样式表，进而拖慢渲染。loading="lazy" 也帮不上忙：字节已经在文档里了。详见 data URI 的性能；大小计算器 可以在决定之前算出编码后的大小。

电子邮件是个特例。Gmail 和其他几个网页邮箱完全不显示 data URI 图片，所以新闻邮件通常使用托管图片或 CID 附件。参见 电子邮件中的 Base64。

用于 API 和 AI 视觉模型的图片

JSON 没有二进制类型，所以在请求体中接收图片的 API 都要求 Base64。这包括很多能描述、分类图片或识别其中文字的多模态 AI 模型。图片有两种传法：

• 一个字符串中的完整 data URI：data:image/jpeg;base64,/9j/4AAQ...
• 一个字段放纯 Base64，另一个字段放媒体类型（image/jpeg）。

前者用 Data URI，后者用 纯 Base64。把 data: 前缀发给只要纯 Base64 的 API，或者反过来，是这类请求被拒绝的常见原因。这些服务通常限制请求大小，而且往往会在服务端把大图缩小，所以编码前先缩放，几乎没有损失就能让请求保持小巧。

可以嵌入的图片格式

HEIC 和 TIFF 可以正常编码，但它们的 data URI 在 Chrome 和 Firefox 中都显示为破图。HEIC 和 TIFF 页面介绍了替代做法。更多签名见 常见的 Base64 前缀。

用代码实现

在浏览器中，FileReader 可以直接返回 data URI：

function imageToDataUri(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(reader.error);
    reader.readAsDataURL(file);
  });
}

在 Python 中，读取字节后自己加上前缀：

import base64, mimetypes

def to_data_uri(path):
    mime = mimetypes.guess_type(path)[0] or "application/octet-stream"
    with open(path, "rb") as f:
        return f"data:{mime};base64,{base64.b64encode(f.read()).decode()}"

更多写法（包括大文件的流式处理）见 JavaScript 中的 Base64 和 Python 中的 Base64。

图片显示不出来时

• HTML 中显示破图。 生成 data URI 时请取消勾选 URL 安全（- _）。浏览器只按标准字母表解码 data: URL，用 - 或 _ 代替 + 或 / 会让图片损坏。
• HTML 中正常，CSS 中失效。 每 76 字符换行 会在字符串中插入换行。HTML 属性能容忍换行，但 CSS url("...") 字符串中的换行会让该规则失效。除电子邮件正文外，请始终关闭换行。
• 前缀重复。 以 data:image/png;base64,data:image/png;base64, 开头的字符串，是把 data URI 粘贴进了一个会自动添加前缀的模板。这种情况请使用 纯 Base64。
• 解码后图片不对或没有图片。 对照上表检查开头几个字符。如果开头与格式不符，说明字符串被截断或弄混了。Base64 转图片 会显示这些字节的真实身份。

常见问题