图片转 Base64
将任意图片转换为 Base64、Data URL、HTML、CSS、Markdown 或 JSON——带即时内联预览和像素尺寸显示。全程在浏览器中运行,不上传任何内容。
图片转 Base64 转换器
上传图片,选择格式,一键复制可嵌入的代码。
将图片拖放到此处
或 点击从本地选择
文件在浏览器本地处理,不会上传
有 Base64 需要还原成图片?
将 Base64 或 Data URL 解码还原为图片,支持在线预览和下载。
如何将图片转换为 Base64
上传图片
拖放或点击选择 PNG、JPEG、GIF、WebP、SVG 或 AVIF 文件。图片会立即预览并显示像素尺寸。
选择输出格式
从 Data URL、HTML img、CSS background-image、Markdown、原始 Base64 或 JSON 中选择。每种格式均可直接粘贴到代码中使用。
复制或下载
点击复制将结果发送到剪贴板。对于大图片,下载 .txt 文件比剪贴板更可靠。
图片转 Base64 输出格式
六种格式——每种均可直接粘贴到代码中使用。
在任何接受 URL 的地方内联嵌入图片。可用于 HTML src、CSS url() 以及作为通用容器格式。
data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...
可直接粘贴的 img 标签,src 为 Base64 Data URL,并自动附带检测到的 width 和 height 属性。
<img src="data:image/png;base64,..." alt="logo" width="200" height="200" />
包含 background-image 的 .element 规则,指向编码后的图片,并附带 width、height 和 background-size。
.element { background-image: url("data:image/png;base64,..."); }Markdown 文档的内联图片语法。适用于 GitHub README、Notion 以及任何渲染 Markdown 的场景。

仅输出编码字符串,不含任何前缀。当接收方只需要 Base64 数据而非完整 Data URL 时使用。
iVBORw0KGgoAAAANSUhEUgAAADAAAA...
包含文件名、MIME 类型、像素尺寸、编码类型和 Base64 数据的结构化 JSON 对象,适合直接用于 API 载荷。
{ "mime": "image/png", "width": 200, "data": "iVBOR..." }什么时候应该使用 Base64 图片?
Base64 编码最适合需要可移植或直接嵌入代码中的小图片。
无外部图片请求
内联图片随页面一起加载——无额外 HTTP 请求,无 CDN 依赖,服务器宕机也不会出现图片丢失。
自包含的 HTML 文件
创建所有图片已内嵌的可移植 HTML 文件,可离线打开、作为单文件共享或用作邮件模板。
CSS 图标和小图
将小型 UI 图标和装饰图片直接嵌入 CSS,让样式表完全自给自足。
API 和 JSON 载荷
通过 REST 或 GraphQL 传输图片数据,无需 multipart 表单编码。JSON 格式可直接粘贴使用。
Markdown 文档
将截图或图表内联嵌入 Markdown 文档、README 或 Wiki 页面,无需单独托管图片。
HTML 邮件模板
许多邮件客户端会屏蔽外部链接图片。使用 Base64 嵌入可确保图片始终正确显示。
常见问题
支持哪些图片格式?
支持浏览器 File API 可读取的所有图片格式:PNG、JPEG、GIF、WebP、SVG、AVIF、ICO、BMP 和 TIFF。MIME 类型会自动检测。
将图片编码为 Base64 会降低画质吗?
不会。Base64 是无损编码——它将二进制数据转换为文本再转回来,不会丢失任何信息。解码后的图片与原始图片完全一致。
为什么 Base64 输出比原始图片更大?
Base64 将每 3 个字节表示为 4 个 ASCII 字符,因此输出比原始文件大约大 33%。这是预期行为,无法避免。
Data URL 在所有浏览器中都能使用吗?
可以。Data URL 在所有现代浏览器中均受支持,且长期以来是 HTML 规范的一部分。唯一的例外是已停用的 IE,它有 32 KB 的大小限制。
大图片适合用 Base64 吗?
通常不适合。对于几 KB 以上的图片,通过 URL 提供服务更高效——浏览器可以缓存 URL 引用的图片,而 Data URL 每次页面加载都会重新解析。
图片会上传到服务器吗?
不会。FileReader API 完全在浏览器中运行,图片数据永远不会离开您的设备。