将图片直接嵌入代码中
有时您需要使用图片,但不希望引入单独的文件:例如样式表中的图标、单文件 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 |  |
控制嵌入图片的体积
嵌入的图片无法单独缓存,并且会随着包含它们的页面或样式表的每次加载而重新下载。根据经验,建议只嵌入小于几 KB 的图片。请先使用图片压缩工具缩小图片体积,如果需要位图,可以使用 SVG 转 PNG 转换矢量图标,或者使用 Base64 编码工具对其他文件和文本进行编码。