图片转 Base64：data URI、HTML 和 CSS
把图片转换为 Base64 字符串或 data URI，并提供可直接粘贴的 HTML img、CSS background 和 JSON 输出。在浏览器中运行。
正在加载图片转 Base64 转换器…
您的文件绝不离开您的设备
如何使用图片转 Base64 转换器
- 1
在此页面打开图片转 Base64 转换器，它直接在浏览器中加载。
- 2
添加文件、文本或数值，并调整设置。
- 3
复制或下载结果。不会上传或存储任何内容。
如何把图片转换为 Base64
Base64 把图片的二进制数据转换成由字母、数字和少量符号组成的纯文本。这段文本可以直接嵌入只允许文本的地方：作为 data URI 放在 HTML 或 CSS 中，放进发送给 API 的 JSON 数据，放进邮件模板或配置文件。显示时浏览器会把它解码回原图。
本转换器在浏览器中读取图片并立即生成编码字符串，同时提供现成的代码片段：完整的 data URI（data:image/png;base64,…）、仅 Base64 字符串、HTML img 标签、CSS background-image 规则和 JSON 对象。任何一项都可复制到剪贴板，或将输出下载为文本或 JSON 文件。支持最大 10 MB 的图片。
如何使用图片转 Base64 转换器
- 上传或拖入图片（JPG、PNG、WebP、GIF、SVG 及其他浏览器支持的格式，最大 10 MB）。会显示原图的格式、尺寸和大小。
- 选择输出格式：Data URI、Base64 Only、CSS Background、HTML Image 或 JSON。
- 一键复制或下载结果，然后粘贴到 HTML、CSS、JavaScript 或 API 请求中。
- 使用很大的图片前，请在统计面板中查看字符数和编码后的大小。
什么时候适合使用 Base64 图片
- 小图标和标志嵌入 CSS 或 HTML，省去一次单独的 HTTP 请求。
- HTML 邮件模板，外部图片可能被屏蔽。
- API 和 JSON，只接受文本字段形式的图片。
- 单文件演示和原型，需要在没有外部资源时运行。
输出示例
data URI 形如 data:image/png;base64,iVBORw0KGgo…，可用于任何需要 URL 的地方。在 HTML 中它变成 <img src="data:image/png;base64,…" alt="">，在 CSS 中则是 background-image: url(data:image/png;base64,…)。JSON 输出把字符串与 MIME 类型和尺寸一起包装，便于 API 数据和测试样例使用。
大小与性能
由于 Base64 比二进制文件大约大 33%，并且要与包含它的 HTML 或 CSS 一起解析，嵌入主要适合几 KB 以下的图片，例如图标、小标志和占位图。请先压缩或缩小图片，最好缩到精确的显示尺寸，让编码字符串保持简短、页面保持快速。
Base64 会让数据比原文件大约大三分之一，而且嵌入的图片无法被浏览器单独缓存。它适合小图片；照片和大型图形使用经图片压缩器压缩的普通图片文件会更快。
私密、免费、快速
本工具完全在你的浏览器中运行：文件和文本都在你自己的设备上处理，不会上传到任何服务器。无需注册、没有水印，也没有每日次数限制。
功能
- data URI 和纯 Base64 输出
- 现成的 HTML img 和 CSS background 片段
- 用于 API 的 JSON 输出
- 复制到剪贴板或下载
- 显示字符数和编码后大小
- 最大 10 MB 图片，在浏览器中处理
常见问题
什么是 Base64 图片？
二进制数据被编码为文本的图片。作为 data URI，它可以直接放在 HTML 或 CSS 中，而不必链接到单独的文件。
Base64 会让图片变大吗？
会，大约大 33%，因为每 3 个字节变成 4 个字符。它最适合小图片。
如何在 HTML 中使用 Base64 图片？
选择 HTML Image 输出并粘贴生成的 img 标签，或把 data URI 放进任意 img 元素的 src 属性。
如何在 CSS 中使用？
选择 CSS Background 输出，它会生成一条包含 data URI 的 background-image 规则，可粘贴到样式表中。
如何把 Base64 转回图片？
把 data URI 粘贴到浏览器地址栏即可查看图片，或用任意 Base64 解码器解码字符串，并以正确的扩展名保存字节。
我的文件会上传到服务器吗？
不会。所有处理都在浏览器本地完成，不会向服务器发送任何内容。关闭标签页后数据即被清除。