如何将图片转换为 Base64
- 将图片拖放到框内、点击选择图片,或按 Ctrl+V 从剪贴板粘贴。
- 选择输出格式:Data URI、纯 Base64、HTML、CSS、Markdown 或 JSON。
- 点击复制,然后将代码粘贴到 HTML、CSS、邮件模板或 API 请求中。
什么时候适合用 Base64 嵌入图片?
内联 Base64 图片可以减少一次 HTTP 请求,适用于小图标、邮件签名、单文件 HTML 文档和 API 数据。但 Base64 比原文件大约 33%,而且无法单独缓存,因此照片以及超过几 KB 的图片,最好还是使用普通图片文件。
输出格式说明
- Data URI:
data:image/png;base64,…,可用于src属性和 CSS。 - 仅 Base64:纯字符串,适用于 API 和数据库。
- HTML / CSS / Markdown:可直接粘贴使用的完整代码片段。
- JSON:将文件名、MIME 类型和数据放在同一个对象中。
常见问题
转换为 Base64 会让图片变大吗?
会,大约增大三分之一。一张 30 KB 的 PNG 转换后约为 40 KB 的 Base64 文本。如果在意体积,请先压缩图片或缩小尺寸。
可以转换哪些图片格式?
浏览器能打开的格式都可以,包括 PNG、JPG/JPEG、GIF、WebP、SVG、BMP、ICO、AVIF 等。正确的 MIME 类型会自动添加到 Data URI 中。
如何在 CSS 中使用 Base64 图片?
选择 CSS 格式,然后将结果粘贴到样式规则中,例如 .logo { background-image: url("data:image/png;base64,…"); }。