Base64 Files
PNG · JPEG · SVG · WebP · AVIF · GIF

图片转 Base64

将任意图片转换为 Base64、Data URL、HTML、CSS、Markdown 或 JSON——带即时内联预览和像素尺寸显示。全程在浏览器中运行,不上传任何内容。

图片转 Base64 转换器

上传图片,选择格式,一键复制可嵌入的代码。

1上传图片

将图片拖放到此处

点击从本地选择

PNGJPEGGIFWebPSVGAVIF

文件在浏览器本地处理,不会上传

2选择输出格式
// 上传图片后此处显示输出结果

有 Base64 需要还原成图片?

将 Base64 或 Data URL 解码还原为图片,支持在线预览和下载。

Base64 转图片

如何将图片转换为 Base64

1

上传图片

拖放或点击选择 PNG、JPEG、GIF、WebP、SVG 或 AVIF 文件。图片会立即预览并显示像素尺寸。

2

选择输出格式

从 Data URL、HTML img、CSS background-image、Markdown、原始 Base64 或 JSON 中选择。每种格式均可直接粘贴到代码中使用。

3

复制或下载

点击复制将结果发送到剪贴板。对于大图片,下载 .txt 文件比剪贴板更可靠。

图片转 Base64 输出格式

六种格式——每种均可直接粘贴到代码中使用。

Data URLtext

在任何接受 URL 的地方内联嵌入图片。可用于 HTML src、CSS url() 以及作为通用容器格式。

data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...
HTML imghtml

可直接粘贴的 img 标签,src 为 Base64 Data URL,并自动附带检测到的 width 和 height 属性。

<img src="data:image/png;base64,..." alt="logo" width="200" height="200" />
CSS backgroundcss

包含 background-image 的 .element 规则,指向编码后的图片,并附带 width、height 和 background-size。

.element { background-image: url("data:image/png;base64,..."); }
Markdownmarkdown

Markdown 文档的内联图片语法。适用于 GitHub README、Notion 以及任何渲染 Markdown 的场景。

![alt text](data:image/png;base64,...)
原始 Base64text

仅输出编码字符串,不含任何前缀。当接收方只需要 Base64 数据而非完整 Data URL 时使用。

iVBORw0KGgoAAAANSUhEUgAAADAAAA...
JSONjson

包含文件名、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 完全在浏览器中运行,图片数据永远不会离开您的设备。