Base64 图片编码 · 免费

图片转 Base64 转换器

将 PNG、JPEG、WebP、GIF、AVIF、BMP 或 ICO 文件编码为 Base64 Data URI。格式根据文件自身的字节判断，预览直接由生成的 URI 渲染，体积增量是实测出来的，而不是估算的。

在浏览器中编码 · 无需上传，无需注册

源文件

图片文件

尚未载入任何文件

将图片拖放到这里

也可以用 ⌘V / Ctrl+V 从剪贴板粘贴。PNG、JPEG、WebP、GIF、AVIF、BMP、ICO 和 SVG 会根据文件自身的字节识别，而不是看文件名。

最大 10 MB · 一次一张图片 · 绝不上传

根据字节识别

下列每种格式的开头字节中都有一个签名，正是它决定了 URI 中的 MIME 类型。被改名为 .jpg 的 PNG 仍会按 PNG 编码，因为声明错误的类型会产生一个在某个浏览器里能显示、换一个浏览器就悄无声息失效的 URI。

PNG
JPEG
WebP
GIF
AVIF
BMP
ICO
SVG

预览

由 Data URI 绘制

下方图片直接从编码后的字符串加载，并以棋盘格为背景，方便看清透明区域。只要它在这里能显示，在你的页面里也能显示。

载入图片后，它会显示在这里，渲染所用的正是复制按钮提供的那个字符串。

取舍

这张图片值得内联吗？

编码总是能成功。是否应该这样做是另一个问题，答案取决于最终字符串有多大，以及它会对所在文件造成什么影响。

载入图片后，结论会显示在这里，按最终 URI 的大小而不是文件大小来分级。

你会失去什么

内联图片没有 URL，而平台为图片提供的一切都针对 URL：srcset 和 sizes、loading="lazy"、fetchpriority、preload，以及可按需调整尺寸的 CDN。放进字符串后，这些全都用不上。

缓存会怎样对待它

独立文件只缓存一次，在变化前可反复使用。内联图片只能作为宿主文件的一部分被缓存，所以修改一条 CSS 规则就会重新发送该样式表中的所有图片，而同一资源引用两次就会传输两次。

为什么压缩救不了它

文本压缩效果很好，但已压缩的 PNG 或 JPEG 转成的 Base64 则不然：源字节接近随机，而编码器在 gzip 处理之前就已经增加了三分之一。预计只能找回几个百分点，而不是增加的那部分。

可直接粘贴

同一组字节的五种形式

较长的数据会隐藏中间部分显示，以保持页面流畅可用。每个复制按钮都会提供完整的字符串。

替代文本

Base64 换行宽度

载入图片后，这里会出现五种可直接复制的输出：Data URI、纯 Base64 数据、background-image 声明、已填入像素尺寸的图片标签，以及 Markdown 图片。

继续你的工作流程

编码之前，以及编码之后。

SVG 转 Data URI 转换器

矢量图形本身就是文本：URL 编码能让它保持可读，体积也接近原始大小，而不是增加三分之一。

用 ASCII 写出的二进制字节。

Data URI 把整个文件装进引用本身，因此引用图片的代码里已经包含了图片。对二进制格式来说，这意味着使用 Base64：每三个字节变成四个可打印字符，体积固定增加三分之一，换来一个放进任何样式表、模板或 JSON 字段都无需再转义的字符串。本页面在你的浏览器中读取文件，根据文件开头的字节而不是文件名识别格式，用生成的 URI 渲染结果，然后如实告诉你：对这张图片来说，这笔交换是否值得。

01
载入一张图片
把文件拖放到面板上，用文件选择器选取，或直接从剪贴板粘贴截图。文件在当前标签页中读取，10 MB 的上限让编码后的字符串保持在浏览器仍能处理的大小。
02
让字节说明格式
文件头会与每种受支持格式的签名逐一比对，因此即使文件被改过名，也会按它的真实格式编码。随后预览由生成的 URI 绘制，下载不完整的文件会在这里露出马脚。
03
复制目标所需的形式
完整的 Data URI、纯 Base64 数据、background-image 声明、带有解码后像素尺寸的图片标签，或 Markdown 图片。旁边的结论会告诉你，内联这个文件是否明智。

为样式表和模板打造

正确的 MIME 类型，实测的成本。

MIME 类型来自文件本身

每种受支持的格式都通过文件头魔数识别，而不是看扩展名或浏览器猜测的类型。这很重要，因为 Data URI 中的 MIME 类型写错并不会报错：它在一个浏览器里能显示，换一个浏览器就什么都画不出来。

以字节计的增量，而非经验法则

每三个字节对应四个字符，加上最多两个填充字符，再加上前缀。面板会针对你载入的文件分别列出每一项，所以这个数字是你可以核对的算术，而不是凭记忆说的“三分之一”。

有理有据的结论

小于 1 KB 时，内联省掉的请求比数据本身还贵。超过 40 KB 时，内联则是在膨胀一个阻塞渲染的文件，只为省下一次并行下载。每个区间都附有理由，让你即使不同意，也能心中有数。

由你复制的字符串渲染

预览直接把编码后的 URI 加载到棋盘格背景上，因此透明区域清晰可见，损坏的文件会在这里失败，而不是在生产环境中。解码后的像素尺寸会写入图片标签，防止布局偏移。

HEIC、TIFF 和 PDF 会被指出，而不是默默吞掉

不受支持的文件会被识别出来，而不是被不明不白地拒绝，因为知道自己交给它的是 HEIC（没有任何浏览器能显示），正是“去转换它”与“对着空白框发呆”之间的区别。

数据不离开标签页

文件通过浏览器自带的 File API 读取，并在内存中直接由这些字节编码。没有上传，没有队列，没有请求，也不保留任何数据，所以尚未发布的素材始终留在你的电脑上。

Base64 图片常见问题

格式、体积、缓存，以及真正要紧的限制。

什么是 Base64 图片 Data URI？+

它就是把整个文件改写成一个 URL。字符串以 data:image/png;base64, 开头，逗号之后的所有内容都是文件的字节，用由字母、数字、加号和斜杠组成的 64 字符字母表写出。由于图片随引用一起传输，加载样式表或 HTML 的一方已经拿到了图片，不会再为它发起第二次请求。

既然 SVG 更适合百分号编码，为什么这里用 Base64？+

因为这些字节是二进制的。百分号编码会保留可打印的 ASCII 字符，其余每个字节都要花三个字符，这对标记语言很划算，对 PNG 却是灾难：压缩后的图像数据几乎是随机的，几乎每个字节都需要转义，字符串会接近文件大小的三倍。Base64 无论内容如何，都固定用四个字符表示三个字节，而且它的字母表在 CSS、HTML 或 JSON 中都无需再转义。对于文本格式的 SVG，情况正好相反，所以这个格式在本站有单独的页面。

内联图片真的能让页面更快吗？+

对于关键路径上的一个小资源，通常可以：一次请求在建立连接、请求头和延迟上的固定开销，远远超过一个 600 字节的图标。超出这个范围，答案很快就变成否定的。这些字节会并入一个阻塞渲染的文件，每当该文件变化就要重新下载，无法懒加载，也无法降低优先级，更不能像独立 URL 那样并行获取。内联是用一次请求换来放错地方的体积；只有当这份体积微不足道时才划算。

编码后的版本到底大多少？+

数据部分为 ceil(bytes / 3) × 4 个字符（取整前固定增加 33.3%），再加上补足到四的倍数所需的填充，以及约二十字节的 data:…;base64, 前缀。一个 10 KB 的 PNG 会变成约 13.4 KB 的文本。压缩也救不回来：gzip 和 brotli 依靠重复内容，而已经压缩过的图片几乎没有重复可言，所以你只能找回几个百分点，而不是增加的那部分。

哪些格式可用，哪些不行？+

PNG、JPEG、WebP、GIF、AVIF、BMP 和 ICO 都可以编码并作为 Data URI 显示，SVG 在这里也能处理，不过它更适合用 SVG 专用页面。最值得注意的例外是 HEIC：它是 iPhone 默认保存的格式，但没有任何浏览器能解码，所以编码它只会得到一个在哪里都显示不出来的 URI。TIFF、PDF 和相机 RAW 文件也是同样的情况。请先把它们转换为 PNG 或 JPEG，再对结果进行编码。

工具说我的文件格式和扩展名不一致，哪个才对？+

字节才对。扩展名只是命名约定，谁都可以修改，而文件被改名是家常便饭：保存成 .jpg 的 PNG 截图，下载时带着 .png 后缀的 WebP。每种图片格式都以固定的签名开头，因此文件头才是权威依据，本页面用的也正是它。如果你在 URI 里写入扩展名对应的 MIME 类型，浏览器对“该嗅探内容还是信任声明”各执一词，于是图片就会在你的电脑上显示，在别人的电脑上却不显示。

可以在电子邮件里或作为 favicon 使用 Data URI 吗？+

作为 favicon 可以：<link rel="icon" href="data:image/png;base64,…"> 在所有现代浏览器中都能使用，还能在首次绘制时省下一次请求。电子邮件则相反：Outlook 直接忽略 Data URI，Gmail 会将其删除，所以邮件中的内嵌图片仍需使用 CID 附件或托管的 URL。另外值得一提：自 2017 年起，浏览器就禁止在顶层导航到 data: URL，所以把它粘贴到地址栏里检查是行不通的。请改用上方的预览。

URI 本身有长度限制吗？+

在现代浏览器中没有实际意义上的限制：几 MB 的 Data URI 也能从样式表或图片标签中加载。真正卡住你的是实际问题。本页面把输入限制在 10 MB，因为编码后的字符串要放在标签页内存和 DOM 中。除此之外，压缩后的打包文件和 source map 会变得无法阅读，一些 CMS 和数据库字段会悄悄截断过长的值，检查元素时 DevTools 会变得卡顿，而且每 1 KB 都会随所在文件被重新发送。