Base64编码/解码工具
Base64是一种基于64个可打印字符来表示二进制数据的编码方式。它将二进制数据转换为可打印的ASCII字符，常用于在HTTP和HTML中传输二进制数据，如图片、音频文件等。
本工具提供文本和图片的Base64编码解码功能。您可以将文本转换为Base64编码字符串，也可以将Base64字符串解码为原始文本。同时支持图片转Base64和Base64转图片的功能，方便在网页开发中使用。
输入文本:
结果输出:
Base64编码使用示例
在HTML中使用Base64图片
<!-- 使用Base64编码的图片 -->
<img src="data:image/png;base64,iVBORw0KGgoAAAAN
SUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4
//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJ
RU5ErkJggg==" alt="Red dot">
<!-- 这是一个1x1像素的红点图片 -->
在CSS中使用Base64背景
/* 使用Base64编码的背景图片 */
.element {
background-image: url('data:image/png;base64,iVBOR
w0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHEl
EQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OH
wAAAABJRU5ErkJggg==');
}
/* 减少HTTP请求，提高页面加载速度 */
在开发中的应用
JavaScript中的使用
// 编码文本为Base64
const text = "Hello, World!";
const encoded = btoa(text);
console.log(encoded);
// 输出: SGVsbG8sIFdvcmxkIQ==
// 解码Base64为文本
const decoded = atob(encoded);
console.log(decoded);
// 输出: Hello, World!
// 处理Unicode字符
const unicode = "你好，世界！";
const unicodeEncoded = btoa(unescape(encodeURIComponent(unicode)));
console.log(unicodeEncoded);
// 输出: 5L2g5aW977yM5LiW55WM77yB
PHP中的使用
// 编码文本为Base64
$text = "Hello, World!";
$encoded = base64_encode($text);
echo $encoded;
// 输出: SGVsbG8sIFdvcmxkIQ==
// 解码Base64为文本
$decoded = base64_decode($encoded);
echo $decoded;
// 输出: Hello, World!
// 读取图片并转换为Base64
$path = 'image.jpg';
$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);
echo $base64;
// 输出: data:image/jpg;base64,/9j/4AAQSkZJRg...
Base64编码的优缺点
优点
- 无需额外的HTTP请求，减少服务器负载
- 避免跨域资源请求问题
- 适合小图标、简单图形等小体积资源
- 可以内联在HTML、CSS和JavaScript中
- 在某些情况下可以提高页面加载速度
缺点
- 编码后的体积比原始二进制数据大约33%
- 不适合大型资源，会增加HTML/CSS文件体积
- 无法单独缓存，每次都需要下载
- 增加浏览器解析和渲染的开销
- Base64字符串不易于维护和调试
最佳实践建议
- 小于5KB的图片可考虑使用Base64编码
- 重复使用的资源不适合Base64编码，应使用缓存
- SVG图标可先优化后再转为Base64以减小体积
- 考虑使用现代前端构建工具自动处理资源编码
- 移动端应用需更谨慎使用，避免增加内存消耗