图像到 Base64 编码器
瞬间将任何图片转换为 Base64 数据 URL — 可复制粘贴用于 CSS、HTML 或代码。无需上传。
何时使用 Base64 编码图像
CSS 和样式
- 在 CSS 中将小图标嵌入为 background-image 数据 URL
- 样式表中的内联加载指示器或占位符图像
- 无需外部托管，即可将徽标添加到纯 CSS 电子邮件模板中
- 在组件库样式表中嵌入 UI 元素图像
HTML 和电子邮件
- 在 HTML 中内嵌图片<img src>作为数据 URL
- 在独立的 HTML 电子邮件模板中添加公司徽标
- 创建带有嵌入式图像的单文件 HTML 文档
- 在 Gmail 和 Outlook HTML 签名中嵌入签名图片
API 和代码
- 对需要 base64 输入的 JSON API 有效负载中的图像进行编码
- 准备用于 AI/ML API 请求的图像（OpenAI Vision、Claude、Gemini）
- 将图像转换为 base64 编码格式，以便存储在数据库字段中。
- 使用 JavaScript 从数据 URL 对 canvas drawImage 的图像进行编码
如何将图像转换为 Base64 编码——3 个步骤
- 1
上传您的图片
将任何 JPG、PNG、WebP、SVG 或 GIF 图像拖放到编码器中。文件将在本地读取，不会上传任何内容。
- 2
复制 Base64 输出
该工具会分别显示完整的数据 URL（data:image/…;base64,…）和原始 base64 字符串。点击“复制”按钮即可将任一格式副本到剪贴板。
- 3
在代码中使用
将数据 URL 粘贴到 HTML 中<img src>，使用 CSS background-image，或者使用 API 有效负载和 JSON 数据的原始 base64 字符串。
免费在线图片转 Base64 编码器 — 无需服务器上传
Base64 编码将二进制图像数据转换为 ASCII 字符字符串，可以直接嵌入到代码、CSS、HTML 或 API 有效负载中，无需外部 URL。PicsSizer 的 Base64 编码器使用浏览器的 FileReader API 读取图像文件，并输出完整的数据 URL 和原始 Base64 字符串——无需服务器上传。编码后的字符串可以直接粘贴到 CSS 的背景图像、HTML 等元素中。<img src> JSON API 正文，或任何其他需要数据 URL 或 base64 图像的地方。
何时使用内嵌 Base64 图片，何时使用外部 URL
Base64 编码最适合小型静态资源：图标、SVG 插图、电子邮件徽标和占位符图像。Base64 表示比二进制源文件大约大 33%，因此嵌入为数据 URL 的大型图像会显著增加 HTML 或 CSS 文件的大小。对于超过 10KB 的图像，使用 CDN 进行外部托管几乎总是更快更高效。对于小于 5KB 的图像（尤其是图标、徽标和装饰性 SVG），Base64 嵌入可以完全消除 HTTP 请求，从而提高关键首屏资源的性能。接受图像输入的 AI/ML API（例如 OpenAI、Anthropic 和 Google）在其 JSON 请求体中使用 Base64，因此 Base64 编码对于视觉模型集成至关重要。
在代码中使用 Base64 编码图像的技巧
对于 CSS 背景图片：将数据 URL 包裹在 `url()` 函数中——`background-image: url('data:image/png;base64,…')`。对于 HTML：直接粘贴为 `src` 属性——`<img src="data:image/jpeg;base64,…">对于电子邮件 HTML：大多数电子邮件客户端都支持小图片的 data URL；部署前请在 Gmail、Outlook 和 Apple Mail 中进行测试。对于 JSON API 有效负载：如果 API 指定了单独的 mediaType 或 mimeType 字段，请使用原始 base64 字符串（不带 data:…;base64, 前缀）。该工具会输出两种格式——完整的 data URL 和原始 base64——因此您可以副本集成所需的任何版本。
图片转 Base64 — 常见问题解答
关于将图像转换为 base64 数据 URL 的常见问题