Base64 in Web Development: Practical Use Cases

Table of Contents

• Data URIs for Images
• Basic Authentication
• File Uploads as Base64
• Performance Considerations

Data URIs for Images

Embed small images directly in HTML or CSS without extra HTTP requests:

<img src="data:image/png;base64,iVBORw0KGgo..." alt="icon" />

Best for images under 2KB. Larger images inflate HTML more than they save on requests.

Basic Authentication

HTTP Basic Auth sends credentials as Base64(username:password) in the Authorization header:

const credentials = btoa("admin:s3cr3t");
fetch("/api/data", {
  headers: { Authorization: `Basic ${credentials}` }
});

Always use HTTPS — Base64 is not encryption.

File Uploads as Base64

Encode files to send them as JSON instead of multipart form data:

function fileToBase64(file) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = (e) => resolve(e.target.result.split(',')[1]);
    reader.readAsDataURL(file);
  });
}

const base64 = await fileToBase64(file);
await fetch('/api/upload', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ filename: file.name, data: base64 })
});

Performance Considerations

• Base64 increases data size by ~33% compared to raw binary
• Inline data URIs skip HTTP requests but can't be cached separately
• For images > 2–3KB, serving as a separate cached file is usually faster