What Is Base64 Encoding and How to Use It

What Is Base64?

Base64 looks like encryption but it isn't — it's just a way to represent binary data using only printable text characters. Anyone can decode it with a single function call. The reason it exists is that a lot of older systems and protocols were designed for text only, and shoving raw binary through them would corrupt the data. Base64 is the workaround that became a standard.

It's important to note: Base64 is an encoding, not encryption. It's reversible without any key, and anyone can decode it. It does not provide security — it only provides safe transport of binary data as text.

Why Does Base64 Exist?

Many systems and protocols were historically designed to handle only ASCII text. Email systems, for example, were designed for 7-bit ASCII text. Sending binary files (images, PDFs, executables) directly would corrupt the data because many bytes in binary files don't correspond to printable characters and can be misinterpreted as control characters.

MIME (Multipurpose Internet Mail Extensions), developed in the early 1990s, standardized Base64 as the way to attach binary files to emails. The encoding maps every 3 bytes of binary data to 4 Base64 characters, using only safe printable characters throughout.

How Base64 Encoding Works

The encoding process works by taking 3 bytes (24 bits) of input at a time and splitting them into four 6-bit groups. Each 6-bit group is then mapped to one of the 64 characters in the Base64 alphabet.

Example: Encoding "Man"

Characters:  M        a        n
ASCII:       77       97       110
Binary:      01001101 01100001 01101110

Split into 6-bit groups:
010011  010110  000101  101110
  19      22      5      46
   T       W      F       u

Result: "TWFu"

When the input isn't divisible by 3, padding characters (=) are added to make the output length a multiple of 4. One = means one byte of padding was needed; == means two bytes.

Base64 in Practice

JWT Tokens

JSON Web Tokens use a URL-safe variant of Base64 (Base64URL, which replaces + with - and / with _) to encode the header and payload. This is why JWTs look like gibberish text — it's Base64-encoded JSON. The JWT decoder on our site decodes this for you.

// A JWT token consists of three Base64URL-encoded parts
eyJhbGciOiJIUzI1NiJ9           // Header
.eyJzdWIiOiJ1c2VyXzEyMyJ9    // Payload
.SflKxwRJSMeKKF2QT4fwpMeJf    // Signature

// Decoded header: {"alg":"HS256"}
// Decoded payload: {"sub":"user_123"}

Data URLs

Data URLs embed binary resources directly in HTML or CSS using Base64. Instead of referencing an external file, the data is inline in the HTML. Useful for small images in single-file exports or email templates.

<!-- Inline PNG image as Base64 data URL -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...">

/* CSS background as data URL */
.icon {
  background-image: url("data:image/svg+xml;base64,PHN2Zy...");
}

HTTP Basic Authentication

HTTP Basic Auth transmits credentials in the Authorization header as Base64-encoded "username:password". This is why it must be used over HTTPS — Base64 provides zero security; it's just encoding. Anyone who intercepts the header can trivially decode it.

# Base64 encode "username:password"
echo -n "username:password" | base64
# dXNlcm5hbWU6cGFzc3dvcmQ=

# The Authorization header
Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=

Embedding Binary Data in JSON/XML

JSON doesn't support binary data. When APIs need to transmit images, files, or cryptographic keys in JSON bodies, Base64 is the standard approach. The binary data is encoded to a Base64 string that JSON can safely represent.

Working with Base64 in Code

JavaScript (Browser)

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

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

// For binary data or Unicode, use TextEncoder
const bytes = new TextEncoder().encode('Hello 🌍');
const base64 = btoa(String.fromCharCode(...bytes));

Python

import base64

# Encode
encoded = base64.b64encode(b'Hello, World!')
print(encoded)  # b'SGVsbG8sIFdvcmxkIQ=='

# Decode
decoded = base64.b64decode('SGVsbG8sIFdvcmxkIQ==')
print(decoded)  # b'Hello, World!'

# URL-safe variant (for JWTs)
url_safe = base64.urlsafe_b64encode(b'Hello')

Base64 Increases Size by ~33%

Base64 encoding increases data size by approximately 33% because it maps every 3 bytes to 4 characters. A 1 MB image becomes about 1.37 MB when Base64-encoded. For large files or performance-critical applications, reference external files rather than embedding them as Base64 data URLs. Use data URLs only for small assets (under 10 KB).

Common Mistakes

Treating Base64 as encryption: Base64 is trivially reversible. Never encode sensitive data and assume it's hidden.
Using standard Base64 in URLs: The + and / characters in standard Base64 have special meaning in URLs. Use Base64URL (with - and _) for URL-safe encoding.
Encoding large files: Base64 is inefficient for large binary transfers. Use proper file upload mechanisms with multipart/form-data instead.
Confusing encoding with compression: Base64 expands data, it doesn't compress it. Don't use it to make data smaller.

Decode JWT Tokens Instantly

JWT tokens use Base64URL encoding. Use our free JWT decoder to inspect token headers, payloads, and expiration times.

Open JWT Decoder

Conclusion

Base64 is a simple but ubiquitous tool in web development. It solves a specific problem — safely transporting binary data through text-based systems — and does it well. You'll encounter it in JWT tokens, HTTP Basic Auth, email attachments, data URLs, and API credentials. The key things to remember: it's not encryption, it adds ~33% size overhead, and you should use the URL-safe variant when encoding data for use in URLs or JWT tokens.