Development2024-03-26

Base64 Explained: The Computer Science Behind the Encoding

Base64 is everywhere — in JWTs, data URIs, email attachments. But do you actually understand how it works? Let's break it down from first principles.

#base64#encoding#computer-science#binary#web-development

这是大一计算机必修课的内容,但显然很多人毕业了也没搞明白。

Let me fix that. By the end of this article, you'll understand Base64 at the bit level — not just "paste text and click convert."

What Problem Does Base64 Solve?

Computers store data as bytes (8 bits). But some protocols — like email (SMTP), early HTTP, and URLs — only safely transmit ASCII text characters (A-Z, a-z, 0-9, +, /).

What happens when you need to send binary data (images, PDFs, encrypted content) through a text-only channel?

Encoding. You convert binary data into a text representation that only uses safe characters.

How Base64 Works (Bit by Bit)

Take the string "Hi!" as an example.

Step 1: Convert to binary

H = 72 = 01001000
i = 105 = 01101001
! = 33 = 00100001

Step 2: Concatenate bits

01001000 01101001 00100001

Step 3: Split into 6-bit groups

010010 000110 100100 100001

Step 4: Convert each group to decimal

010010 = 18 → S
000110 = 6  → G
100100 = 36 → k
100001 = 33 → h

Step 5: Map to Base64 alphabet

A=0, B=1, ..., Z=25, a=26, ..., z=51, 0=52, ..., 9=61, +=62, /=63

Result: SGkh

Why 3 Bytes Become 4 Characters

3 bytes = 24 bits. 24 / 6 = 4 groups. That's why Base64 always expands data by 33%.

Input Size Base64 Output
3 bytes 4 chars
300 bytes 400 chars
3 MB 4 MB

Padding with =

If your input isn't divisible by 3, Base64 adds padding:

  • 1 remaining byte → 2 Base64 chars + ==
  • 2 remaining bytes → 3 Base64 chars + =
"Hi" (2 bytes) → "SGk="
"H" (1 byte)   → "SA=="

Common Use Cases

  1. Data URIs — Embed images directly in HTML/CSS:

    <img src="data:image/png;base64,iVBORw0KGgo...">
    
  2. JWT Tokens — The header and payload are Base64url-encoded:

    eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyIjoiYWRtaW4ifQ.abc123
    
  3. HTTP Basic AuthAuthorization: Basic base64(username:password)

  4. Email Attachments — MIME encodes attachments as Base64

Base64 vs Base64url

Standard Base64 uses + and /. URLs can't contain / safely. Base64url replaces:

  • +-
  • /_

Use a Base64 Converter to encode/decode between standard and URL-safe variants.

Is Base64 Encryption?

No. Base64 is encoding, not encryption. Anyone can decode it. It's like putting a letter in an envelope — anyone can open the envelope and read it.

If you need secrecy, use encryption (AES, RSA). If you need safe transport through text channels, use Base64.

Quick Reference

Operation Tool
Text → Base64 Base64 Converter
Base64 → Text Base64 Converter
File → Base64 Base64 Converter
JWT decode JWT Decoder

Encode and decode Base64 instantly with our free Base64 Converter — supports text, files, and URL-safe variants.

🛠

Try It Yourself

Put what you've learned into practice with our free online tools.