Base64 Encoding Explained: What It Is, How It Works & When to Use It

If you have ever peeked at an email source, looked at a data URI in CSS, or worked with any web API, you have almost certainly encountered Base64. It shows up everywhere — but what exactly is it, and why does it exist?

What Is Base64?

Base64 is an encoding scheme that converts binary data (or text) into a string of 64 printable ASCII characters. The 64 characters are: A–Z (26), a–z (26), 0–9 (10), + and / (2), with = used for padding.

The name comes from the fact that only 64 distinct characters are used. Because these characters appear in virtually every character set, a Base64 string can travel through any text-based system — email, JSON, XML, HTML attributes, URLs — without being corrupted or misinterpreted.

Why Does Base64 Exist?

The root problem is that many older systems were designed to handle text, not arbitrary binary data. Protocols like SMTP (email), HTTP headers, and XML parsers treat certain byte values as control characters — and if binary data contains those byte values, the system breaks.

Base64 solves this by mapping every possible 3-byte group of binary data into 4 printable ASCII characters. The output is longer (+33%) but guaranteed to be safe in any text context.

How Base64 Encoding Works

The algorithm is simple:

1. 1.Take 3 bytes (24 bits) of input data
2. 2.Split them into four 6-bit groups
3. 3.Map each 6-bit group (value 0–63) to its Base64 character using the lookup table
4. 4.If the input is not a multiple of 3 bytes, pad with one or two = characters

Example — encoding the word "Hi":

• ▸"H" = ASCII 72 = binary 01001000
• ▸"i" = ASCII 105 = binary 01101001
• ▸Combined 16 bits + 8 padding bits = 010010 000110 100100 (padded)
• ▸Lookup: S, G, k, = → "SGk="

7 Common Use Cases for Base64

• ▸Email attachments (MIME encoding) — the original reason Base64 was invented
• ▸Data URIs — embed images directly in CSS or HTML: src="data:image/png;base64,iVBOR..."
• ▸JSON payloads — pass binary data (images, PDFs) inside a JSON field
• ▸HTTP Basic Authentication — credentials are Base64-encoded in the Authorization header
• ▸JWTs (JSON Web Tokens) — header and payload sections are Base64url-encoded
• ▸Storing binary in text databases — embed small images or files in a VARCHAR column
• ▸Simple obfuscation — not security, but hides readable text from casual inspection

Base64 vs Base64url

Standard Base64 uses + and / characters, which have special meaning in URLs. Base64url is a URL-safe variant that replaces + with - and / with _, and omits the = padding. You will see Base64url in JWTs and many modern APIs.

How to Encode or Decode Base64 in Your Browser

Modern browsers expose two built-in JavaScript functions:

• ▸btoa(string) — encodes a string to Base64
• ▸atob(string) — decodes a Base64 string back to text

For Unicode text (anything beyond ASCII), you need a small wrapper: btoa(unescape(encodeURIComponent(text))). This is exactly what our online tool does — it handles Unicode correctly so you do not need to worry about it.

How to Encode / Decode Base64 Online

1. 1.Open the Base64 Encoder / Decoder tool (link below)
2. 2.Select Encode or Decode mode using the tab buttons
3. 3.Paste or type your text in the input box
4. 4.The output updates instantly in the right panel
5. 5.Click Copy or use the Swap button to reverse the operation