DEV Community

David
David

Posted on

What is Base64 Encoding? A Visual Guide for Developers

#tutorial #beginners #javascript #webdev

You've seen it everywhere — in JWT tokens, data URIs, API responses, email attachments. That mysterious string of letters, numbers, plus signs, and slashes that looks like someone fell asleep on their keyboard.

That's Base64. And once you understand it, you'll spot it in the wild constantly.

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
Enter fullscreen mode Exit fullscreen mode

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 tradeoff? The encoded output is about 33% larger than the original data.

The math: Every 3 bytes of input becomes 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
Enter fullscreen mode Exit fullscreen mode

Step 2: Concatenate all bits 

01001000 01101001
Enter fullscreen mode Exit fullscreen mode

Step 3: Split into 6-bit groups 

010010 | 000110 | 1001XX
Enter fullscreen mode Exit fullscreen mode

(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
Enter fullscreen mode Exit fullscreen mode

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 → base64decode.co

Where You'll See Base64 in the Wild

1. Data URIs 

<img src="data:image/png;base64,iVBORw0KGgo..." />
Enter fullscreen mode Exit fullscreen mode

Embed small images directly in HTML/CSS without extra HTTP requests.

2. JWT Tokens 

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIn0.dozjgNryP4J3jVmNHl0w5N_XgL0n3I9PlFUP0THsR8U
Enter fullscreen mode Exit fullscreen mode

JWTs are three Base64url-encoded JSON objects joined by dots.

3. Email Attachments (MIME)

Every email attachment you've ever sent was Base64-encoded. The MIME protocol uses it to embed binary files in text-based email.

4. API Responses 

{
  "file": "UGFzc3dvcmQxMjM=",
  "encoding": "base64"
}
Enter fullscreen mode Exit fullscreen mode

APIs often return binary data (PDFs, images, certificates) as Base64 strings in JSON.

5. Basic HTTP Authentication 

Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=
Enter fullscreen mode Exit fullscreen mode

HTTP Basic Auth encodes username:password in Base64. (This is NOT encryption — anyone can decode it.)

Base64 is NOT Encryption

This is the most common misconception. Base64 is encoding, not encryption.

  • Encoding = converting data to a different format (reversible by anyone)
  • Encryption = protecting data with a key (reversible only with the key)

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
Enter fullscreen mode Exit fullscreen mode

Base64 vs Base64url

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

Standard URL-safe
+ -
/ _
= (padding) Often omitted

JWT tokens use Base64url. So do many APIs that put encoded data in query parameters.

Common Base64 Operations

JavaScript (Browser) 

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

// Decode
const decoded = atob('SGVsbG8sIFdvcmxkIQ==');
// Hello, World!
Enter fullscreen mode Exit fullscreen mode

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

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

// Decode Unicode
const decoded = decodeURIComponent(escape(atob(encoded)));
Enter fullscreen mode Exit fullscreen mode

Node.js 

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

// Decode
Buffer.from('SGVsbG8=', 'base64').toString('utf8');
Enter fullscreen mode Exit fullscreen mode

Python 

import base64

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

# Decode
base64.b64decode('SGVsbG8=').decode()
# 'Hello'
Enter fullscreen mode Exit fullscreen mode

Command Line 

# Encode
echo -n 'Hello' | base64

# Decode
echo 'SGVsbG8=' | base64 -d

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

# Decode a file
base64 -d image.b64 > image.png
Enter fullscreen mode Exit fullscreen mode

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 (< 10KB)
  • 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 binary data directly (multipart uploads, binary protocols)
  • 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.

Top comments (0)