图片转 Base64 转换器 - 免费在线工具
把图片编码为 Base64 字符串，支持 PNG、JPG、GIF、WebP、SVG、BMP，即时生成，浏览器本地处理。
上传图片
上传
拖放或点击上传
支持 PNG, JPG, GIF, WebP, SVG, BMP
Base64 输出
Base64 字符串将显示在这里...
Base64 字符串将显示在这里...
如何将图片转换为 Base64
通过拖放或点击上传区域上传您的图片。
工具将即时将您的图片转换为 Base64 字符串。
复制原始 Base64 字符串或用于 HTML/CSS 的 Data URI 格式。
使用生成的字符串将图片直接嵌入到您的代码中。
主要功能
即时转换
即时将图片转换为 Base64，无需上传到服务器。
隐私优先
所有处理都在您的浏览器本地进行。您的图片永远不会离开您的设备。
支持所有格式
兼容 PNG, JPEG, GIF, SVG, WebP 和 BMP 格式。
Data URI 就绪
获取完整的 Data URI 字符串，可直接用于 HTML <img> 标签或 CSS background-image。
常见问题
为什么要将图片转换为 Base64？
将图片转换为 Base64 允许您将其直接嵌入到 HTML 或 CSS 文件中，从而减少 HTTP 请求数量并加快小图片的页面加载时间。
有文件大小限制吗？
由于处理是在您的浏览器中完成的，限制取决于您的设备内存。但是，建议仅对小图片（图标、徽标）使用 Base64，以避免 HTML 文件大小膨胀。
会出现质量损失吗？
不会，Base64 编码是无损的。解码后的图片将与原始图片完全相同。
将任意图片拖入工具或点击选择，即可立即生成 Base64 字符串。工具同时输出原始 Base64 文本和可直接粘贴的 Data URI（data:image/png;base64,...），支持 PNG、JPG、GIF、WebP、SVG 和 BMP 格式。所有处理均在浏览器本地完成，文件不会上传至服务器。
如何将图片转换为 Base64
- 1
上传图片
将文件拖放到上传区域，或点击浏览选择文件。支持 PNG、JPG、GIF、WebP、SVG 和 BMP 格式。
- 2
获取编码结果
工具在本地读取文件，无需上传至服务器，即时生成 Base64 字符串。
- 3
选择原始 Base64 或 Data URI
复制原始 Base64 文本用于 JSON 载荷，或复制完整 Data URI 字符串直接用于 HTML <img> 标签和 CSS background-image。
- 4
嵌入代码
将 Data URI 直接粘贴到 HTML 或 CSS 中，实现图片内联，减少一次 HTTP 请求。
参考资料
- RFC 2397 — data URL 方案
IETF 规范，定义用于内联嵌入 Base64 编码媒体的 data: URL 方案。
- MDN — Data URL
Data URL 语法、Base64 编码及在 HTML 和 CSS 中嵌入图片的实用指南。
相关工具
常见问题
- 为什么要将图片转为 Base64？
- Base64 编码允许将图片以文本字符串的形式直接嵌入 HTML 或 CSS，无需额外的 HTTP 请求加载外部文件。对于图标、Logo 等小图片尤为实用，可提升页面加载速度。
- 有文件大小限制吗？
- 工具本身无固定上限，实际限制取决于浏览器内存。需注意 Base64 编码后体积约比原始二进制文件大 33%，因此建议仅对小尺寸图片使用 Base64 内联方式。
- 转换为 Base64 会导致图片质量损失吗？
- 不会。Base64 是无损编码，解码后的图片与原文件逐字节完全相同。
- 原始 Base64 和 Data URI 有什么区别？
- 原始 Base64 是纯编码字符串。Data URI 则在其前面加上 data:image/png;base64, 前缀，告知浏览器 MIME 类型，可直接粘贴到 <img> 的 src 属性或 CSS background-image 中使用。
- 我的图片会上传到服务器吗？
- 不会。所有编码操作均通过 FileReader API 在浏览器本地完成，您的图片不会离开设备。
- 如何在 CSS 中使用 Base64 图片？
- 复制 Data URI，将其作为 background-image: url('data:image/png;base64,...'); 属性值粘贴到 CSS 文件中即可。
- SVG 文件可以转换吗？
- 可以，支持 SVG 格式。但由于 SVG 本身是文本格式，许多场景下直接以 <svg> 标签内联反而比转为 Base64 更高效，文件体积也更小。