📝 输入文本
等待转换...
📤 Base64 输出
📖

使用说明 & Base64 图片嵌入指南

1文本编码:输入文本 → 点击编码 → 获得 Base64 字符串
2文本解码:输入 Base64 → 点击解码 → 还原原始文本
3图片编码:选择图片 → 自动生成 Base64 数据 (data:image/xxx;base64,...)
4图片解码:粘贴 Base64 图片数据 → 点击解码 → 预览并下载图片

📌 Base64 图片在 Web 开发中的使用

1. 在 CSS 中嵌入 Base64 图片

background-image: url("data:image/jpg;base64,/9j/4AA...");

2. 在 HTML 中直接使用

<img src="data:image/png;base64,iVBORw0KGgo..." alt="Base64图片" />

3. 注意事项

  • Base64 编码后的体积通常比原文件大 约 30%
  • 适合小图标、小图片(建议 < 100KB),大图建议使用文件引用
  • 浏览器缓存有效,无需额外 HTTP 请求