什么是 Base64 图片 Data URI？

Data URI 会把图片直接嵌入到形如 data:image/png;base64,XXXX 的字符串中。图片字节经过 Base64 编码，因此你可以把整张图片放进 HTML 的 src 或 CSS 的 url() 中，无需单独的文件或请求。

我可以编码哪些图片格式？

凡是浏览器能读取的图片——PNG、JPEG、WebP、GIF、SVG、BMP、AVIF 和 ICO 都可以。解码器会从 Data URI 读取 MIME 类型，并提供匹配的下载扩展名。

我应该把图片内联为 Base64 吗？

内联适合图标或邮件图片这类小而频繁复用的资源，此时省去一次请求很有帮助。对较大的图片通常不划算，因为 Base64 会让体积增加约三分之一，且数据无法单独缓存。

我可以把 Data URI 解码回图片文件吗？

可以。切换到 Base64 → 图片，粘贴 data:image/…;base64, 字符串，工具就会预览图片并让你以正确的扩展名下载。

编码图片时它们会被上传吗？

不会。编码器使用浏览器的 FileReader 读取文件，并在你的设备上构建 Data URI。不会向 ArrayKit 或任何服务器发送任何内容。

为什么 Base64 字符串比我的图片大？

Base64 用四个字符表示三个字节，因此编码后的文本比原始二进制大约大 33%，再加上简短的 data:…;base64, 前缀。这种开销是正常且符合预期的。

Base64 图片编码器 / 解码器

将图片转换为带 HTML 和 CSS 片段的 Base64 Data URI，或将 Data URI 解码为可下载的图片。

Base64 图片编码器 / 解码器完全在你的浏览器中运行。你拖入的图片和粘贴的 Data URI 都在你的设备上处理，绝不会上传到 ArrayKit。

打开 Base64 编码器 / 解码器

关于 Base64 图片编码器 / 解码器

Base64 图片编码器可将任意图片转换为可直接粘贴进 HTML 或 CSS 的 Base64 Data URI。拖入 PNG、JPEG、WebP、SVG 或 GIF，它会即时显示 Data URI 以及可用于生产的代码片段——带可编辑 alt 文本的 <img> 标签和一条 CSS background-image 规则——每个都支持一键复制。它还会显示 MIME 类型、文件大小、像素尺寸和字符串长度，让你清楚知道自己嵌入了什么。切换到解码模式即可粘贴 Data URI、预览图片，并以正确的扩展名下载。它面向前端开发者、邮件与模板作者，以及任何为节省一次请求而内联小图标的人。一切都在你的浏览器中本地运行，因此你的图片始终留在你的设备上。

功能特性

拖放或点击，将 PNG、JPEG、WebP、SVG 和 GIF 编码为 Base64 Data URI
一键复制原始 Data URI、现成的 HTML <img> 标签以及 CSS background-image 规则
可编辑的 alt 文本，直接写入生成的 <img> 片段以提升无障碍性
一目了然地显示 MIME 类型、文件大小、像素尺寸和 Data URI 长度
解码模式可粘贴 Data URI 以预览图片，并以正确的扩展名下载
当图片过大、不适合高效地内联为 Base64 时给出提示
既支持栅格照片，也支持 SVG 和 GIF，并提供合理的下载扩展名
完全在你的浏览器中运行，图片绝不会上传到服务器

如何使用 Base64 图片编码器 / 解码器

保持选中图片 → Base64 选项卡，将图片拖入拖放区
复制 Base64 Data URI、HTML <img> 标签或 CSS background-image 规则
可选地输入 alt 文本，将其嵌入 <img> 片段
切换到 Base64 → 图片，粘贴 Data URI，然后预览并下载图片

示例

输入

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAB…

输出

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAB…" alt="logo" />

一张 PNG 变成内联的 <img> 标签，无需额外的网络请求即可加载。

常见错误与故障排除

粘贴 Data URI 时显示 'The Data URI payload is not valid Base64.' — 复制从 data:image/… 开始并包含 ';base64,' 的整个字符串，并删除编辑器添加的多余引号或换行。
解码后的图片无法预览。 — 检查 MIME 类型是否与数据匹配——被标为 image/jpeg 的 PNG 内容不会渲染。重新编码原始文件以获得正确的 Data URI。
内联图片后我的 HTML 或 CSS 文件变得很大。 — Base64 会增加约 33% 的开销，且内联图片不会被单独缓存。只内联小图标，较大的图片请作为普通文件链接。
来自其他工具的 SVG Data URI 看起来不一样。 — 有些工具对 SVG 使用百分号编码而非 Base64。本编码器始终使用 Base64；两者都是有效的 Data URI，但并非逐字节互换。

常见问题

什么是 Base64 图片 Data URI？: Data URI 会把图片直接嵌入到形如 data:image/png;base64,XXXX 的字符串中。图片字节经过 Base64 编码，因此你可以把整张图片放进 HTML 的 src 或 CSS 的 url() 中，无需单独的文件或请求。
我可以编码哪些图片格式？: 凡是浏览器能读取的图片——PNG、JPEG、WebP、GIF、SVG、BMP、AVIF 和 ICO 都可以。解码器会从 Data URI 读取 MIME 类型，并提供匹配的下载扩展名。
我应该把图片内联为 Base64 吗？: 内联适合图标或邮件图片这类小而频繁复用的资源，此时省去一次请求很有帮助。对较大的图片通常不划算，因为 Base64 会让体积增加约三分之一，且数据无法单独缓存。
我可以把 Data URI 解码回图片文件吗？: 可以。切换到 Base64 → 图片，粘贴 data:image/…;base64, 字符串，工具就会预览图片并让你以正确的扩展名下载。
编码图片时它们会被上传吗？: 不会。编码器使用浏览器的 FileReader 读取文件，并在你的设备上构建 Data URI。不会向 ArrayKit 或任何服务器发送任何内容。
为什么 Base64 字符串比我的图片大？: Base64 用四个字符表示三个字节，因此编码后的文本比原始二进制大约大 33%，再加上简短的 data:…;base64, 前缀。这种开销是正常且符合预期的。