🖼️ 功能介绍

图片转base64工具可以将图片文件转换为base64编码字符串，支持多种图片格式，转换后的字符串可以直接嵌入到HTML、CSS或JavaScript代码中使用，无需额外的图片文件。

📖 技术原理

base64 是一种基于 64 个可打印字符来表示二进制数据的表示方法。它常用于在通常处理文本数据的场合，表示、传输、存储一些二进制数据，包括 MIME 的电子邮件及 XML 的一些复杂数据。

图片的 base64 编码就是可以将一幅图片数据编码成一串字符串，使用该字符串代替图片地址，从而不需要使用图片的 URL 地址。

✨ 主要特性

• 多格式支持： 支持JPEG、PNG、GIF、WebP、SVG等常见图片格式
• 拖拽上传： 支持拖拽图片文件到指定区域进行转换
• 实时预览： 上传后立即显示图片预览和base64编码
• 一键复制： 点击复制按钮即可复制base64字符串
• 在线预览： 可以预览转换后的base64图片效果
• 本地处理： 所有转换都在浏览器本地完成，保护隐私安全

💡 使用步骤

1. 将图片文件拖拽到上传区域，或点击选择图片文件
2. 系统会自动将图片转换为base64编码
3. 转换完成后，base64字符串会显示在下方文本框中
4. 点击"预览"按钮可以在新窗口查看图片效果
5. 点击"复制"按钮复制base64字符串到剪贴板

📋 支持格式

• 输入格式： JPEG、PNG、GIF、WebP、SVG、BMP、ICO等
• 输出格式： base64编码字符串
• 文件大小： 建议不超过10MB，大文件可能影响转换速度

🎯 适用场景

• 网页开发中嵌入小图标和装饰图片
• CSS背景图片的base64编码
• 邮件模板中的图片嵌入
• 移动应用中的图片资源
• 离线应用中的图片存储
• 减少HTTP请求，提升网页加载速度

⚠️ 注意事项

• base64编码会使文件大小增加约33%
• 大图片转换为base64会生成很长的字符串
• 建议只对小图片（小于100KB）使用base64编码
• base64字符串不能直接用于CSS的url()函数，需要添加data:image/格式前缀
• 转换后的字符串会自动包含data:image/格式前缀
• 所有处理都在本地进行，不会上传到服务器

💻 使用示例

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

background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==');

const img = new Image();
img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==';

❓ 常见问题

• Q: base64编码会增加文件大小吗？
  A: 是的，base64编码会使文件大小增加约33%，因为每3个字节会编码为4个字符。
• Q: 什么时候应该使用base64图片？
  A: 建议对小图片（小于100KB）使用base64编码，可以减少HTTP请求，提升加载速度。
• Q: 支持哪些图片格式？
  A: 支持JPEG、PNG、GIF、WebP、SVG、BMP、ICO等常见图片格式。
• Q: 转换后的字符串可以直接使用吗？
  A: 可以，转换后的字符串已经包含了data:image/格式前缀，可以直接在HTML、CSS或JavaScript中使用。
• Q: 大图片可以转换吗？
  A: 可以，但建议不要转换过大的图片，因为会生成很长的字符串，影响代码可读性。