Base64 图片的使用场景

Base64 编码图片的适用场景和使用方法

问题

什么是 Base64 图片？在什么场景下应该使用 Base64 编码的图片？

解答

Base64 是一种将二进制数据编码为 ASCII 字符串的方式。图片经过 Base64 编码后，可以直接嵌入到 HTML、CSS 或 JavaScript 中。

格式

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...

使用场景

1. 小图标内联到 CSS

/* 适合小于 2KB 的图标 */
.icon-search {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZD0iTTEwIDJhOCA4IDAgMTA1LjI5IDEzLjcxbDQuNyA0LjdhMSAxIDAgMDEtMS40MiAxLjQybC00LjctNC43QTggOCAwIDAxMTAgMnptMCAyYTYgNiAwIDEwMCAxMiA2IDYgMCAwMDAtMTJ6Ii8+PC9zdmc+');
  width: 24px;
  height: 24px;
}

2. HTML 中直接嵌入

<!-- 减少一次 HTTP 请求 -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" alt="pixel">

3. Canvas 导出图片

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 绘制内容
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 100, 100);

// 导出为 Base64
const base64Image = canvas.toDataURL('image/png');
console.log(base64Image);

// 可以直接用于下载或上传
const link = document.createElement('a');
link.download = 'image.png';
link.href = base64Image;
link.click();

4. 文件上传预览

const input = document.getElementById('fileInput');
const preview = document.getElementById('preview');

input.addEventListener('change', (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();
  
  reader.onload = (event) => {
    // 获取 Base64 字符串
    const base64 = event.target.result;
    preview.src = base64;
  };
  
  // 读取文件为 Base64
  reader.readAsDataURL(file);
});

5. 避免跨域问题

// 将跨域图片转为 Base64 后可以在 Canvas 中使用
async function imageToBase64(url) {
  const response = await fetch(url);
  const blob = await response.blob();
  
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result);
    reader.readAsDataURL(blob);
  });
}

不适合使用的场景

// ❌ 大图片不适合用 Base64
// Base64 编码后体积增加约 33%
// 无法利用浏览器缓存
// 会阻塞 HTML/CSS 解析

// ✅ 大图片应该使用普通 URL
<img src="/images/large-photo.jpg" alt="photo">

关键点

适合小图片：一般建议 2KB 以下的图片使用 Base64
减少请求：内联到代码中可以减少 HTTP 请求数
体积增大：Base64 编码后体积增加约 33%
无法缓存：内联的 Base64 图片无法被浏览器单独缓存
常见场景：小图标、Canvas 导出、文件预览、邮件嵌入图片