What is Base64 Encoding? A Visual Guide for Developers

Source: Dev.to

What Is Base64?

Base64 is a binary‑to‑text encoding scheme. It takes any binary data — images, files, text, whatever — and represents it using only 64 “safe” ASCII characters:

A‑Z (26) + a‑z (26) + 0‑9 (10) + '+' + '/' = 64 characters

plus = for padding.

That’s it. The entire alphabet is designed to survive transport through systems that only handle text safely — email, URLs, JSON, XML, HTML.

Why Does Base64 Exist?

Back in the early Internet days, many systems could only handle 7‑bit ASCII text. Binary data (images, executables, non‑English characters) would get corrupted when transmitted through email servers, gateways, and protocols designed for plain text.

Base64 solved this by encoding binary data into a text‑safe format.
The trade‑off? The encoded output is about 33 % larger than the original data.

The math: Every 3 bytes of input become 4 Base64 characters

3 × 8 = 24 bits → 4 × 6 = 24 bits

How Base64 Encoding Works (Step by Step)

Let’s encode the string "Hi" to Base64.

Step 1: Convert to binary

H = 72  → 01001000
i = 105 → 01101001

Step 2: Concatenate all bits

01001000 01101001

Step 3: Split into 6‑bit groups

010010 | 000110 | 1001XX

(Pad the last group with zeros to make it 6 bits: 100100)

Step 4: Map each 6‑bit group to the Base64 alphabet

010010 = 18 → S
000110 = 6  → G
100100 = 36 → k

Step 5: Add padding

Since our input was 2 bytes (not divisible by 3), we add one = pad.

Result: SGk=

You can verify this yourself →

Where You’ll See Base64 in the Wild

1. Data URIs – embed small images directly in HTML/CSS without extra HTTP requests.

   <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...">

2. JWT Tokens – three Base64url‑encoded JSON objects joined by dots.

   eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIn0.dozjgNryP4J3jVmNHl0w5N_XgL0n3I9PlFUP0THsR8U

3. Email Attachments (MIME) – every attachment is Base64‑encoded to embed binary files in a text‑based email.

4. API Responses – binary data (PDFs, images, certificates) are often returned as Base64 strings in JSON.

   {
     "file": "UGFzc3dvcmQxMjM=",
     "encoding": "base64"
   }

5. Basic HTTP Authentication – encodes username:password.

   Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=

Base64 Is Not Encryption

The most common misconception is that Base64 provides security. It’s encoding, not encryption.

Base64 provides zero security. Anyone can decode it instantly. Never use it to “hide” sensitive data.

# "Hiding" a password in Base64
echo -n 'MySecretPassword' | base64
# TXlTZWNyZXRQYXNzd29yZA==

# "Unhiding" it
echo 'TXlTZWNyZXRQYXNzd29yZA==' | base64 -d
# MySecretPassword

Base64 vs. Base64url

Standard Base64 uses + and /, which are problematic in URLs. Base64url replaces them:

JWT tokens use Base64url, as do many APIs that place encoded data in query parameters.

Common Base64 Operations

JavaScript (Browser)

// Encode
const encoded = btoa('Hello, World!'); // SGVsbG8sIFdvcmxkIQ==

// Decode
const decoded = atob('SGVsbG8sIFdvcmxkIQ=='); // Hello, World!

⚠️ btoa() and atob() only handle ASCII. For Unicode:

// Encode Unicode
const encoded = btoa(unescape(encodeURIComponent('Hello 🌍')));

// Decode Unicode
const decoded = decodeURIComponent(escape(atob(encoded)));

Node.js

// Encode
const encoded = Buffer.from('Hello').toString('base64');

// Decode
const decoded = Buffer.from('SGVsbG8=', 'base64').toString('utf8');

Python

import base64

# Encode
b64 = base64.b64encode(b'Hello').decode()
# 'SGVsbG8='

# Decode
txt = base64.b64decode('SGVsbG8=').decode()
# 'Hello'

Command Line

# Encode a string
echo -n 'Hello' | base64

# Decode a string
echo 'SGVsbG8=' | base64 -d

# Encode a file
base64 image.png > image.b64

# Decode a file
base64 -d image.b64 > image.png

When to Use Base64

✅ Use it when:

• Embedding binary data in text‑based formats (JSON, XML, HTML)
• Sending files through text‑only protocols
• Creating data URIs for small images (< 10 KB)
• Working with APIs that expect Base64 input

❌ Don’t use it when:

• You think it provides security (it doesn’t)
• The file is large (33 % size overhead adds up)
• You can send the raw binary data directly (e.g., via multipart/form‑data)
• You’re trying to compress data (it makes things bigger)

Try It Yourself

I built a free Base64 encoder/decoder at base64decode.co — paste any text or upload a file, get instant results. No signup, no tracking, runs entirely in your browser.

Part of a suite of 11 free developer tools I built for everyday dev work.

What’s your most common use case for Base64? Drop it in the comments — I’m curious whether it’s JWTs, data URIs, or something I haven’t thought of.