将任意图像转换为 Base64 编码的数据 URL,这样你就能直接将其嵌入 HTML、CSS 或 JavaScript,而无需单独的文件引用。Base64 图像适用于电子邮件模板、行内 SVG 样式、样式表中的数据 URI,以及无法在外部托管文件的场景。输出是一个包含完整数据 URL 字符串的文本文件,可随时复制粘贴。
将文件拖放到此处
或 浏览以上传 · 从剪贴板粘贴
每个文件最大 10.0 MB
上传你的图像
拖入一张 JPEG、PNG、WebP 或 AVIF 图像(最大 10 MB——Base64 字符串会迅速变大)。该工具读取原始文件字节,不重新编码。
点击转换
图像字节被转换为 Base64 字符串,并用适当的 MIME 类型前缀包裹成数据 URL(例如 data:image/jpeg;base64,...)。
下载文本文件
输出是一个包含完整数据 URL 的 .txt 文件。在任意文本编辑器中打开它,然后复制该字符串。
在你的代码中使用
将数据 URL 直接粘贴到 img 的 src 属性、CSS 的 background-image 属性或 JavaScript 字符串中。无需单独托管图像。
Base64 数据 URL 是一种将二进制数据(如图像)直接嵌入文本字符串的方式。格式为:data:[mime-type];base64,[encoded-data]。它允许在 HTML、CSS 和 JavaScript 中直接使用图像,而无需通过网络加载单独的文件。一张 JPEG 图像会变成一个以 data:image/jpeg;base64,/9j/4AAQ... 开头的很长字符串。
在以下情况使用 Base64:你需要在 HTML 电子邮件模板中嵌入图像(其中外部 URL 可能被屏蔽)、在单文件 HTML 文档中、在 SVG 文件中,或在 JavaScript 生成的内容中。对于公共网站上的大图像,请避免使用 Base64——它会使 HTML/CSS 文件大小增加约 33%、阻塞解析,并且无法与页面分开缓存。
Base64 编码将每 3 字节的二进制数据表示为 4 个 ASCII 字符——即 33% 的开销。一个 100 KB 的 JPEG 会变成约 133 KB 的 Base64 字符串。这是 Base64 的根本权衡:它让二进制数据可以用文本表示,但以体积为代价。对于大图像,这一开销很显著。
我们将输入限制为 10 MB。生成的 Base64 字符串约为 13.3 MB。浏览器能很好地处理长字符串,但将它们嵌入 HTML/CSS 可能会显著减慢页面渲染。就 Web 用途而言,请将嵌入图像控制在 10–20 KB 以下。更大的图像应作为单独文件提供。
可以:<img src="data:image/jpeg;base64,/9j/4AAQ..." alt="我的图像">。浏览器会解码 Base64 字符串并显示图像,无需任何网络请求。这在所有现代浏览器中对 JPEG、PNG、GIF、WebP 和 SVG 格式均有效。
有问题吗？ 报告问题
