Base64 图片编码器

Base64 图片编码器与解码器：拖入一张图片即可复制其 Data URI 及现成的 HTML 和 CSS 代码片段，或粘贴 Data URI 进行预览和下载。

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

由 Udit Agarwal 开发和维护

打开 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 图片编码器 / 解码器

1. 保持选中 图片 → Base64 选项卡，将图片拖入拖放区
2. 复制 Base64 Data URI、HTML <img> 标签或 CSS background-image 规则
3. 可选地输入 alt 文本，将其嵌入 <img> 片段
4. 切换到 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, 前缀。这种开销是正常且符合预期的。

相关工具

• Base64 编码 / 解码 — 安全的 UTF-8 Base64 编码与解码。
• 图片格式转换工具 — 在浏览器中完整地在 PNG、JPEG 和 WebP 之间转换图片。
• 图片优化工具 — 重新编码并缩小图片（JPEG/WebP/PNG），可选调整尺寸。
• SVG 优化工具 — 压缩 SVG：移除注释、元数据和编辑器残留，并合并空白。
• EXIF 查看与移除工具 — 查看并移除照片中的 EXIF 元数据（含 GPS）；不上传任何内容。
• URL 编码 / 解码 — 编码和解码 URL 组件。
• 二维码生成器 — 从文本或 URL 生成二维码；可下载为 PNG 或 SVG。

更多图片工具

• 应用图标生成器 — 将一张图片转换为所有 iOS、macOS 和 Android 应用图标尺寸——打包为 ZIP，在您的浏览器中完成。
• sprite sheet CSS 动画生成器 — 把 sprite sheet 转成带实时预览的 CSS steps() 动画。
• SVG 转 PNG 转换器 — 在浏览器中把 SVG 标记或 .svg 文件以任意比例栅格化为清晰的 PNG 或 JPG。
• 图片取色器 — 在浏览器中从图片取任意像素的 HEX、RGB 和 HSL 颜色值。
• 颜色格式转换器 — 把任意 CSS 颜色转换为 HEX、RGB、OKLCH 等
• 条形码生成器 — 生成 EAN、UPC、Code 128 条形码并导出 SVG 或 PNG
• 图片配色提取器 — 从图片提取主色与配色，导出 HEX、RGB、HSL、CSS 与 Tailwind。
• 图片翻转与旋转 — 在浏览器中旋转和翻转图片
• 图片裁剪 — 自由区域或固定比例裁剪，全分辨率下载。
• 图片水印 — 文字或Logo，定位或平铺，可调透明度与旋转。
• 图片打码 — 把截图局部永久模糊、马赛克或涂黑。
• 图片圆角工具 — 裁成圆角矩形或圆形，导出透明PNG。

查看全部图片工具 (40) · 全部工具