[GUIDE] 8 min read

[GUIDE] Complete Base64 Reference

Everything you need to know about Base64 encoding: theory, implementation, and best practices.

January 2025 | fundamentals

// WHAT IS BASE64?

Base64 is a binary-to-text encoding scheme that represents binary data using 64 ASCII characters. It's designed to encode binary data that needs to be stored and transferred over media designed for textual data.

The Base64 character set includes A-Z, a-z, 0-9, and two additional characters (typically + and /), plus = for padding.

// HOW BASE64 WORKS

Base64 encoding works by taking binary data and converting it into a string of ASCII characters. The process involves:

1. Split the input into 6-bit chunks (Base64 uses 6 bits per character) 2. Map each 6-bit value to a character in the Base64 alphabet 3. Add padding with '=' characters if needed

// Example: Encoding 'Man' to Base64
// 'M' = 01001101, 'a' = 01100001, 'n' = 01101110
// Combined: 010011010110000101101110
// Split into 6-bit groups: 010011 010110 000101 101110
// Decimal values: 19, 22, 5, 46
// Base64 characters: T, W, F, u
// Result: 'TWFu'

// COMMON USE CASES

  • > Embedding images in HTML/CSS (data URIs)
  • > Encoding binary data for JSON APIs
  • > Email attachments (MIME encoding)
  • > Storing binary data in databases
  • > Authentication tokens and API keys
  • > URL-safe data transmission

// JAVASCRIPT IMPLEMENTATION

Modern browsers provide built-in Base64 encoding and decoding functions:

For encoding text to Base64, use btoa() (binary to ASCII). For decoding Base64 to text, use atob() (ASCII to binary).

// Encoding text to Base64
const text = 'Hello, World!';
const encoded = btoa(text);
console.log(encoded); // SGVsbG8sIFdvcmxkIQ==

// Decoding Base64 to text
const decoded = atob(encoded);
console.log(decoded); // Hello, World!

// For Unicode strings, use TextEncoder/TextDecoder
const encoder = new TextEncoder();
const decoder = new TextDecoder();

const unicodeText = 'Hello, δΈ–η•Œ!';
const bytes = encoder.encode(unicodeText);
const base64 = btoa(String.fromCharCode(...bytes));
console.log(base64);

// SECURITY CONSIDERATIONS

Base64 is NOT encryption or security. It's simply encoding for data representation. Important security notes:

Never use Base64 alone for sensitive data protection. Always validate Base64 input to prevent injection attacks. Be aware that Base64 increases data size by ~33%.

  • > Base64 is easily reversible - it provides no security
  • > Always validate and sanitize Base64 input
  • > Use proper encryption for sensitive data
  • > Consider URL-safe Base64 variants for web applications
  • > Be mindful of padding oracle attacks in some contexts

// BEST PRACTICES

  • > Use URL-safe Base64 for web applications (replace + with -, / with _)
  • > Always handle padding correctly
  • > Validate input length and characters
  • > Consider compression before encoding for large data
  • > Use streaming for very large data sets
  • > Implement proper error handling for invalid input