Base64 Encoding & Decoding Explained: UTF-8, Data URIs & Size Overhead

Base64 is a binary-to-text encoding scheme defined in RFC 4648 that translates binary data into an ASCII string format suitable for transmission across channels that only reliably handle plain text (such as email bodies, JSON payloads, and HTML inline assets).

How the 6-Bit Translation Works

Computers store data in 8-bit bytes. Base64 divides input streams into 6-bit chunks ($2^6 = 64$ possible characters):

1. Alphabet: A-Z, a-z, 0-9, +, and /.
2. Padding (=): Added when the input byte length is not evenly divisible by 3.
3. The 33% Size Increase: Because every 3 bytes (24 bits) are expanded into 4 ASCII characters (32 bits), Base64 encoding always increases raw payload size by approximately 33%.

The JavaScript UTF-8 Trap: btoa() and atob()

Native browser functions btoa() and atob() only support Latin-1 characters. Passing UTF-8 multi-byte characters (like emojis or non-English text) throws an InvalidCharacterError.

// ✅ Safe UTF-8 Base64 encoding in modern browsers
function utf8ToBase64(str) {
  return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (match, p1) => {
    return String.fromCharCode('0x' + p1);
  }));
}

To encode and decode text strings, JSON, or binary files safely without encoding crashes, use DevKitLab's Base64 Encoder and Base64 Decoder.