图片转 Base64 工具 — 立即编码图片
上传图片或粘贴 URL 即可立即获得 Base64 编码。可复制为 Data URL、HTML img 标签、CSS 背景或 Markdown 格式。所有处理均在您的浏览器中进行 — 不会上传任何内容。
拖拽图片到这里
或点击选择 — 支持 JPG、PNG、WebP、GIF
为什么要将图片转换为 Base64
单文件交付
直接在 HTML 或 CSS 中嵌入图片，消除单独的 HTTP 请求。Base64 编码的图片作为文档的一部分传输，减少网络调用并简化资产管理。
邮件模板
邮件客户端会阻止外部图片并以不同方式处理附件。Base64 内联图片可在 Gmail、Outlook 和 Apple Mail 中一致显示，不会出现图片链接损坏。
100% 隐私安全
您的图片永远不会离开浏览器。转换工具完全使用 FileReader 和 Canvas API 运行 — 一切都保持在本地。无需上传，无服务器，无隐私问题。
即时编码
无需等待上传或处理。Base64 编码在您的机器上几毫秒内完成。复制结果并直接粘贴到您的代码中。
如何使用此工具
选择输入方式
从您的设备上传图片文件或粘贴 URL。上传选项支持浏览器支持的任何图片格式 — JPG、PNG、WebP、GIF、SVG。URL 模式可从网上获取公开可访问的图片，尽管 CORS 限制可能会阻止某些来源加载。
配置输出选项
决定是否包含 Data URL 前缀（`data:image/png;base64,` 部分）。大多数用例都需要它，但如果您只需要原始编码字符串，请取消勾选该选项。每 76 字符换行对于邮件附件和 MIME 标准很有用，但 Web 应用程序通常会省略它。
复制或下载
点击转换按钮，Base64 字符串会立即显示。直接复制或下载为文本文件保存。格式按钮为您提供现成的 HTML img 标签、CSS background-image 声明或 Markdown 图片语法 — 全部预填充 Data URL。
何时使用 Base64（何时不使用）
适合：小图标和 UI 元素
网站图标、社交媒体图标、状态指示器 — 任何 10KB 以下的内容都是很好的候选。Base64 字符串可以舒适地内联并节省 HTTP 请求。您避免了瀑布流延迟，即浏览器等待 CSS 文件，然后再等待每个背景图片。
适合：邮件模板和新闻通讯
邮件客户端会积极阻止外部图片。Base64 图片可以可靠地渲染，因为它们是消息正文的一部分，而不是单独的资源。这就是为什么您在促销邮件中看到实际显示的 Logo 图片，而不是显示为损坏的链接。
避免：大型照片和背景图片
Base64 编码会使文件大小增加约 33%。一张 100KB 的照片变成 133KB 的字符串 — 这还不包括浏览器解析开销。对于小资产之外的任何内容，外部图片文件更高效。它们单独缓存，通过 gzip 压缩传输，不会使您的 HTML 或 CSS 膨胀。
避免：频繁更改的图片
用户头像、动态生成的内容或任何每个用户更新的内容应保持为外部 URL。Base64 字符串难以精细缓存 — 更改图片意味着重新部署整个 HTML 文件。外部图片让您可以独立更新资产并利用 CDN 缓存。
常见问题
此工具会将我的图片上传到任何地方吗？
不会。一切都使用 FileReader 和 Canvas API 在您的浏览器中进行。您的图片在本地处理，永远不会离开您的计算机。这就是为什么页面加载后它可以离线工作。
Data URL 和原始 Base64 有什么区别？
Data URL 包含前缀，如 `data:image/png;base64,`，后跟编码字符串。这告诉浏览器数据类型和编码。原始 Base64 只是编码字符，没有前缀。在 Web 开发中使用 Data URLs — 仅在系统期望字符串时使用原始 Base64。
为什么要使用换行？
每 76 字符换行是邮件附件和一些旧系统的 MIME 标准。现代 Web 应用程序不需要它 — 事实上，未换行的字符串略小。仅当您在邮件模板中嵌入图片或使用需要换行的系统时才启用换行。
我可以粘贴任何网站的 URL 吗？
只有当服务器允许跨源请求时才可以。许多网站会阻止盗链并且不发送 CORS 标头，这会阻止浏览器读取图片数据。如果 URL 模式失败，请尝试下载图片并使用上传选项。
我可以转换多大的图片？
技术上，浏览器可以处理非常大的图片，但 Base64 字符串会增长 33% 并变得难以处理。5MB 的图片变成 6.7MB 的文本字符串 — 那是数百万个字符。出于实际目的，请将您的图片保持在 500KB 以下。大型照片和背景应保持为外部图片文件。
Base64 编码支持动画 GIF 吗？
支持。编码器会保留整个文件，包括所有帧和时间数据。当您将 Data URL 嵌入 `` 标签时，动画会像原始 GIF 一样播放。PNG 透明度和 WebP 功能也是如此 — 编码过程中不会丢失任何内容。
常见问题
Base64 编码有什么用途？
Base64 编码将二进制图片数据转换为可直接嵌入 HTML、CSS 或 JavaScript 的文本格式。常见用途包括：在 CSS 中嵌入小图标无需 HTTP 请求，为单文件 HTML 页面创建 data URI，以文本形式在数据库中存储图片，以及使用接受 Base64 输入的 API。
Base64 输出比原始图片大多少？
与原始二进制文件相比，Base64 编码会使文件大小增加约 33%。对于小图片（10KB 以下），为了嵌入的便利性，这种开销是可以接受的。对于较大的图片，Base64 效率较低 — 文件大小超过 20KB 时，通过 URL 加载会更好。
我可以一次将多张图片转换为 Base64 吗？
可以，上传多张图片后，每张图片都会独立转换为 Base64。所有结果都会显示复制按钮，便于获取。当您在单个项目中需要为不同图标或资产使用多个 Base64 字符串时，这特别有用。
Base64 输出是什么格式？
输出包含 data URI 前缀（例如 'data:image/png;base64,...'），因此字符串可以立即在 HTML src 属性、CSS background-image 属性或 JavaScript Image 对象中使用。只需粘贴完整的字符串 — 无需额外格式化。