图片Base64转换器 - 在线编码和解码

将图片转换为Base64字符串或将Base64解码为图片。支持PNG、JPG、SVG、GIF和WebP。100%客户端处理。

输入

拖拽图片到此处或点击浏览

支持 PNG、JPG、SVG、GIF、WebP（最大 10MB）

输出

图片完全在您的浏览器中处理。不会将任何文件上传到服务器。

常见问题

什么是图片Base64编码，为什么要使用它？

图片Base64编码使用Base64字母表（A-Z、a-z、0-9、+、/）将二进制图片数据转换为文本字符串。生成的字符串可以作为Data URI（data:image/png;base64,...）直接嵌入HTML、CSS或JavaScript中。这消除了每张图片的单独HTTP请求，对于图标、Logo和UI元素等小图片特别有益。在外部图片加载经常被阻止的邮件模板中也是必不可少的。

如何使用这个图片Base64工具？

编码：选择「编码」模式，然后将图片拖放到上传区域（或点击浏览）。工具会立即生成Base64字符串。选择您首选的输出格式（Raw Base64、Data URI、HTML <img>、CSS Background），然后点击复制按钮。解码：选择「解码」模式，在输入区域粘贴Base64字符串或Data URI。工具会自动解码并显示图片预览。您还可以下载解码后的图片。

我的图片数据安全吗？图片会上传到服务器吗？

您的图片100%安全，永远不会离开您的浏览器。所有编码和解码都使用浏览器的原生FileReader API和atob()/btoa()函数在客户端执行。没有图片数据、Base64字符串或任何信息传输到任何服务器。您可以通过检查浏览器的网络标签来验证——不会发出上传请求。

支持哪些图片格式？

此工具支持五种最常见的Web图片格式：PNG、JPEG（JPG）、SVG、GIF和WebP。每种格式都会通过MIME类型自动检测，并使用适当的Data URI前缀正确编码。基于XML的SVG文件编码效果特别好，在Base64形式中保持矢量质量。动画GIF在Base64编码时也会保留动画。

Base64编码的大小开销是多少？

Base64编码会将数据大小增加约33%。这是因为Base64将每3字节的二进制数据转换为4个ASCII字符。例如，30KB的图标会变成约40KB的Base64字符串。这使得Base64嵌入非常适合小图片（10-20KB以下），在这种情况下消除HTTP请求比大小增加更有利。对于较大的图片（100KB+），通常最好将它们作为单独的文件提供，以利用浏览器缓存和并行加载。

Raw Base64和Data URI有什么区别？

Raw Base64是纯编码字符串（例如：iVBORw0KGgoAAAA...）。Data URI用MIME类型前缀包装它：data:image/png;base64,iVBORw0KGgoAAAA... 在HTML <img src>、CSS background-image: url(...)或浏览器<link>标签中嵌入图片时需要Data URI格式。当您只需要API负载、数据库存储或自定义处理的编码数据时，Raw Base64很有用。

什么时候应该使用Base64图片 vs. 普通图片文件？

使用Base64嵌入：小图标和Logo（10-20KB以下）、单文件HTML页面、邮件模板、CSS精灵替代。使用普通图片文件：大照片、受益于浏览器缓存的图片、多页面共享的图片、超过50KB的图片（33%的大小开销变得显著）。一般规则：如果HTTP请求开销大于Base64大小开销，就使用Base64。

我可以解码没有Data URI前缀的Base64字符串吗？

可以。如果您粘贴没有data:image/...;base64,前缀的原始Base64字符串，工具会假设默认格式（PNG）来尝试解码。为获得最佳结果，请包含完整的Data URI前缀，以便工具正确检测图片类型并在下载时设置适当的文件扩展名。

代码示例

// === Image to Base64 Encoding (Browser) ===

// Encode image file to Base64 Data URI
function imageToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(new Error('Failed to read file'));
    reader.readAsDataURL(file);
  });
}

// Extract raw Base64 from Data URI
function extractRawBase64(dataUri) {
  const commaIndex = dataUri.indexOf(',');
  return commaIndex !== -1 ? dataUri.substring(commaIndex + 1) : dataUri;
}

// Format output for different use cases
function formatBase64Output(dataUri, format) {
  switch (format) {
    case 'raw': return extractRawBase64(dataUri);
    case 'html': return `<img src="${dataUri}" alt="" />`;
    case 'css': return `background-image: url(${dataUri});`;
    default: return dataUri;
  }
}

// === Base64 to Image Decoding ===

function base64ToBlob(base64Input) {
  let dataUri = base64Input.trim();
  if (!dataUri.startsWith('data:')) {
    dataUri = `data:image/png;base64,${dataUri}`;
  }
  const [header, data] = dataUri.split(',');
  const mimeMatch = header.match(/data:(.*?);/);
  const mimeType = mimeMatch ? mimeMatch[1] : 'image/png';
  const byteString = atob(data);
  const byteArray = new Uint8Array(byteString.length);
  for (let i = 0; i < byteString.length; i++) {
    byteArray[i] = byteString.charCodeAt(i);
  }
  return new Blob([byteArray], { type: mimeType });
}

// Usage
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  const dataUri = await imageToBase64(file);
  console.log('HTML:', formatBase64Output(dataUri, 'html'));
});