Base64 Encoding: A Complete Technical Reference

What Base64 Actually Is

Base64 is a binary-to-text encoding scheme that represents binary data as a sequence of 64 ASCII characters. The name comes from the 64-character alphabet it uses: A–Z, a–z, 0–9, +, and /.

It was designed to solve one core problem: many systems that transport text (email, HTTP headers, URLs, XML attributes) were not designed to handle arbitrary binary data. Base64 provides a safe, universally readable representation for any binary content.

How the Encoding Works

Base64 processes input in 3-byte (24-bit) groups and encodes each group as 4 Base64 characters (6 bits each). This means every 3 bytes of input become 4 characters of output — a 33% size increase.

Input bytes (ASCII "Man"):

M = 77 = 01001101 a = 97 = 01100001 n = 110 = 01101110

Grouped into 6-bit chunks:

010011 | 010110 | 000101 | 101110

Mapped to Base64 alphabet:

T W F u → TWFu

When input length isn't divisible by 3, padding characters (=) are added to make the output length a multiple of 4.

Base64 Variants

The standard Base64 alphabet isn't always appropriate. Several variants exist for specific contexts:

{name}

{chars}

{note}

{name}

{chars}

{note}

{name}

{chars}

{note}

Real-World Use Cases

Data URIs

Embedding binary assets directly in HTML or CSS without a separate HTTP request:

{''}

JWT Tokens

JSON Web Tokens consist of three URL-safe Base64-encoded segments separated by dots:

eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1c2VyMTIzIn0.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

Header.Payload.Signature — each section is Base64url-encoded (no padding).

HTTP Basic Authentication

Credentials are Base64-encoded in the Authorization header:

Authorization: Basic dXNlcjpwYXNzd29yZA==

Note: Base64 is encoding, not encryption. HTTPS is what makes this secure.

Base64 in JavaScript

Encoding

btoa("Hello, World!")     // "SGVsbG8sIFdvcmxkIQ=="
btoa(unescape(encodeURIComponent("Héllo")))  // handles Unicode

Decoding

{`atob("SGVsbG8sIFdvcmxkIQ==") // "Hello, World!"`}

Unicode caveat: btoa()/atob() operate on Latin-1 characters only. For arbitrary Unicode strings, use TextEncoder with the Uint8Array approach, or a library like js-base64.