跳到正文
SPCXTools

图片转Base64

将任意图片转换为Base64 Data URI,并可复制为纯Base64、CSS背景、HTML img标签或Markdown格式。

本地运行——文件不会离开你的设备

正在加载工具…

如何使用图片转Base64

  1. 1选择一张图片或将其拖放到页面上。
  2. 2选择输出格式 — Data URI、纯 Base64、CSS、HTML 或 Markdown。
  3. 3查看预览旁显示的编码后大小。
  4. 4点击 复制,将代码粘贴到你需要的地方。

将图片直接嵌入代码中

有时您需要使用图片,但不希望引入单独的文件:例如样式表中的图标、单文件 HTML 报告中的 Logo、JSON API 响应中的占位图、Markdown 文档中的图片或组件库中的背景。此转换器可将任何图片转换为 Base64 编码,并生成可直接粘贴的格式——支持 Data URI、纯 Base64、CSS background-image、HTML <img> 标签或 Markdown 图片语法。

功能特点

  • 支持所有常见图片格式:PNG、JPG、GIF、WebP、AVIF、SVG、ICO 等。
  • 五种输出格式,满足不同使用场景。
  • 大小对比:显示原文件与编码后文本的大小对比。
  • 图片预览:带透明棋盘格背景的图片预览。
  • 一键复制。
  • 隐私安全:文件仅在浏览器本地处理,绝不会外传。

输出示例

格式 代码示例
Data URI data:image/png;base64,iVBORw0KGgo…
Base64 iVBORw0KGgo…
CSS background-image: url("data:image/png;base64,…");
HTML <img src="data:image/png;base64,…" alt="logo">
Markdown ![logo](data:image/png;base64,…)

控制嵌入图片的体积

嵌入的图片无法单独缓存,并且会随着包含它们的页面或样式表的每次加载而重新下载。根据经验,建议只嵌入小于几 KB 的图片。请先使用图片压缩工具缩小图片体积,如果需要位图,可以使用 SVG 转 PNG 转换矢量图标,或者使用 Base64 编码工具对其他文件和文本进行编码。

常见问题

什么是 Data URI?
Data URI 将文件直接嵌入文本中,格式为 data:image/png;base64, 后跟编码字节。浏览器渲染它的效果与通过 URL 加载完全相同,且无需额外的网络请求。
为什么 Base64 编码后的体积比原图大?
Base64 将每 3 个字节编码为 4 个文本字符,因此编码后的体积比原文件大 33% 左右。当网页开启 gzip 或 Brotli 压缩时,这部分额外体积会被部分抵消。
什么时候适合使用 Base64 图片?
适用于小图(如图标、小 Logo、占位图,以及 HTML 邮件或单文件文档中的图片),此时减少额外请求更有意义。对于大尺寸照片,使用普通图片文件更好,因为它们可以独立缓存,且不会让 HTML 或 CSS 文件变得臃肿。
邮件客户端支持显示 Base64 图片吗?
支持情况不一。许多网页邮箱客户端会拦截或移除 Data URI 图片,因此对于邮件简报(newsletter),将图片托管在服务器上或作为内联附件发送通常更可靠。
我的图片会被上传吗?
不会。图片完全在您的浏览器本地读取和编码,不会发送到任何服务器。