工具说明
图片转 Base64 工具把图片编码成一段以 data:image 开头的 Data URL 文本。这串文本本身就是图片,可以直接写进 HTML 的 src、CSS 的 background-image,或塞进 JSON、配置文件里,省掉一次额外的网络请求。
它特别适合处理图标、小背景、邮件签名里的小图等场景:把图片内联进代码后,部署时就不必再单独托管这个文件。转换在浏览器本地完成,图片不上传,生成的字符串可一键复制。
使用步骤
- 上传或拖入要转换的图片(PNG、JPG、SVG、GIF、WebP 等)。
- 工具会即时生成对应的 Base64 / Data URL 字符串。
- 按需要复制纯 Base64,或带 data:image 前缀的完整 Data URL。
- 直接粘贴到 HTML img 标签、CSS background 或代码里使用。
适用场景
- 把小图标、占位图内联进 HTML/CSS,减少 HTTP 请求。
- 做邮件模板,需要把图片直接嵌进内容而非外链。
- 在没有图床的环境(如单文件 demo、Canvas、小程序)里使用图片。
- 把 SVG / Logo 写进配置或主题文件,随代码一起分发。
常见问题
什么时候适合用 Base64 内联图片?
适合小图标、小背景、邮件图片等。文件越小越划算;大图转 Base64 后体积会膨胀约 33%,反而拖慢加载,不建议内联。
为什么 Base64 比原图大?
Base64 用文本字符表示二进制数据,编码本身会增加约 1/3 体积。这是格式特性,换取的是「无需单独文件」的便利。
纯 Base64 和 Data URL 有什么区别?
Data URL 是带 data:image/png;base64, 前缀的完整字符串,可直接放进 src / CSS;纯 Base64 只是后面那段编码,常用于接口传输或自己拼前缀。