🖼 图片转 Base64

什么是图片转Base64工具？

图片转Base64工具是一种将图片文件转换为Base64编码字符串的在线工具。Base64编码可以将任意二进制数据（包括图片）表示为纯文本字符串，格式为data:image/[type];base64,[编码数据]。这种Data URL格式可以直接嵌入HTML、CSS或JavaScript代码中，无需额外的HTTP请求即可显示图片。在小图标、装饰性图形等场景中使用Base64内嵌图片，可以减少HTTP请求数量，提升页面加载性能。本工具支持将上传图片实时转换为Base64字符串，支持JPEG、PNG、GIF、WebP、SVG等格式，同时支持调整输出质量以控制字符串长度。

如何使用图片转Base64工具

1. 上传图片 — 拖拽或点击上传需要转换的图片文件。
2. 调整设置 — 可选调整输出格式和压缩质量，以控制Base64字符串的长度。
3. 复制结果 — 获取完整的Data URL字符串，一键复制到剪贴板使用。

常见使用场景

技术原理

图片转Base64的完整流程：

// 图片 → Base64 Data URL
// 1. 读取图片文件为二进制数据
// 2. 将二进制数据按Base64规则编码为文本
// 3. 拼接Data URL前缀

// JavaScript实现
const fileInput = document.querySelector('input[type=file]');
fileInput.addEventListener('change', (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();
    reader.onload = (event) => {
        const dataUrl = event.target.result;
        // "data:image/png;base64,iVBORw0KGgo..."
        console.log(dataUrl);
    };
    reader.readAsDataURL(file);
});

// 在HTML中使用
// 

// 在CSS中使用
// .icon { background: url("data:image/svg+xml;base64,..."); }

// 体积变化：Base64编码使数据增大约33%
// 10KB图片 → ~13.3KB Base64字符串

最佳实践与注意事项

• 仅建议对小图片（<32KB）使用Base64内嵌，大图片应使用独立文件以便浏览器缓存。
• Base64图片无法被浏览器单独缓存，每次加载页面都会重新传输。
• SVG图片优先使用URL编码（data:image/svg+xml,...）而非Base64，体积更小。
• 在HTTP/2环境下，多路复用减少了多请求的开销，Base64内嵌的优势降低。因此在实际项目中应权衡利弊，根据具体情况决定是否使用内嵌方案。

常见问题