Base64 Encoding Explained: Principles and Real-world Use Cases

What Is Base64?

Base64 is a method for encoding arbitrary binary data as plain ASCII text. It uses a set of 64 printable characters (A-Z, a-z, 0-9, +, /) to represent any byte sequence. It is commonly used in scenarios where binary data must be transmitted through text-based protocols such as HTTP or SMTP email.

The "64" in Base64 refers to the size of the character set used. Each Base64 character represents 6 bits of data (2^6 = 64).

The Base64 Character Set

Index	Char	Index	Char	Index	Char	Index	Char
0	A	16	Q	32	g	48	w
1	B	17	R	33	h	49	x
2	C	18	S	34	i	50	y
3	D	19	T	35	j	51	z
4	E	20	U	36	k	52	0
5	F	21	V	37	l	53	1
6	G	22	W	38	m	54	2
7	H	23	X	39	n	55	3
8	I	24	Y	40	o	56	4
9	J	25	Z	41	p	57	5
10	K	26	a	42	q	58	6
11	L	27	b	43	r	59	7
12	M	28	c	44	s	60	8
13	N	29	d	45	t	61	9
14	O	30	e	46	u	62	+
15	P	31	f	47	v	63	/

There is also a special padding character = used to fill out the encoded length.

How Base64 Encoding Works (Step by Step)

Base64 converts every 3 bytes (24 bits) of input into 4 Base64 characters (6 bits each). The steps are:

1. Split the input data into groups of 3 bytes.
2. Regroup the 3 bytes (24 bits) into 4 groups of 6 bits each.
3. Look up the corresponding Base64 character for each 6-bit value.
4. If the last group has fewer than 3 bytes, append = padding characters.

Padding Mechanism

Because Base64 processes 3 bytes at a time, padding is needed when the input length is not a multiple of 3:

• 1 byte remaining: Two == padding characters are added.
• 2 bytes remaining: One = padding character is added.
• Exactly a multiple of 3: No padding is needed.

// JavaScript examples
btoa("A")    // → "QQ=="  (1 byte, 2 padding chars)
btoa("AB")   // → "QUI="  (2 bytes, 1 padding char)
btoa("ABC")  // → "QUJD"  (3 bytes, no padding)
btoa("Man")  // → "TWFu"  (3 bytes, no padding)

URL-safe Base64

Standard Base64 uses the characters + and /, which have special meaning in URLs (+ represents a space, / is a path separator). Placing them directly in a URL can cause parsing errors.

To solve this, RFC 4648 defines a URL-safe Base64 variant:

• Replace + with - (hyphen)
• Replace / with _ (underscore)
• Padding = is usually omitted (or replaced with .)

// JavaScript: standard Base64 to URL-safe Base64
function toUrlSafeBase64(str) {
  return btoa(str)
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=/g, '');
}

// Restore URL-safe Base64 to standard Base64
function fromUrlSafeBase64(str) {
  var b64 = str.replace(/-/g, '+').replace(/_/g, '/');
  while (b64.length % 4 !== 0) {
    b64 += '=';
  }
  return atob(b64);
}

Real-world Use Cases

1. JWT (JSON Web Token)

A JWT consists of three URL-safe Base64-encoded parts separated by .:

// JWT structure: header.payload.signature
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIn0.
SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

// Decode the payload portion
atob('eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIn0')
// → '{"sub":"1234567890","name":"John Doe"}'

2. Image Data URIs

Embed images directly in HTML or CSS to avoid extra HTTP requests:

<!-- Embedding a small image in HTML -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" alt="1x1 pixel">

/* Embedding a background image in CSS */
.icon {
  background-image: url('data:image/svg+xml;base64,PHN2Zy4uLjwvc3ZnPg==');
}

3. HTTP Basic Authentication

HTTP Basic Auth uses Base64 to transmit credentials (note: this is NOT encryption — it is only encoding!):

// Username: admin, Password: password123
const credentials = btoa('admin:password123');
// → "YWRtaW46cGFzc3dvcmQxMjM="

fetch('/api/data', {
  headers: {
    'Authorization': 'Basic ' + credentials
  }
});

4. Email Attachments (MIME)

The SMTP email protocol is a text-based protocol. Binary attachments must be Base64-encoded to be safely transmitted in an email. This is actually the original use case that Base64 was designed for.

Data Size Overhead

Base64 encoding increases the data size by approximately 33% (every 3 bytes becomes 4 characters). With line breaks (every 76 characters), the actual overhead is about 36-37%. This should be considered when deciding whether to embed images as data URIs.

Original Size	Base64 Size	Overhead
1 KB	~1.37 KB	+37%
10 KB	~13.7 KB	+37%
100 KB	~137 KB	+37%
1 MB	~1.37 MB	+37%

Security Considerations