Base64 Encoding Explained with Examples

Base64 shows up everywhere — JWT tokens, data URIs, email attachments, HTTP Basic Auth headers. But most developers have only a vague sense of what it actually is. This post explains it properly.

What is Base64?

Base64 is an encoding scheme that converts binary data into a string of 64 printable ASCII characters. Those characters are:

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/

Plus = for padding.

It’s not encryption — it provides no security. Anyone can decode a Base64 string instantly. Its only purpose is to safely transmit binary data through systems that only handle text.

Why does Base64 exist?

Many protocols were designed to handle plain text only. Email (SMTP), for example, was built to carry ASCII text. Trying to send raw binary data — an image, a PDF, an executable — through such a system causes data corruption because certain byte values have special meanings in ASCII.

Base64 solves this by encoding binary into a subset of ASCII characters that are guaranteed to survive transit unchanged.

How does the encoding work?

Base64 works by converting every 3 bytes of input (24 bits) into 4 Base64 characters (each representing 6 bits).

Take the string Man:

Character	M	a	n
ASCII	77	97	110
Binary	01001101	01100001	01101110

Combined: 010011010110000101101110

Split into 6-bit groups: 010011 010110 000101 101110

That’s 19, 22, 5, 46 in decimal — which maps to T, W, F, u in the Base64 alphabet.

So Man encodes to TWFu.

Padding: When the input length isn’t divisible by 3, = characters are added to make the output length divisible by 4.

• 1 leftover byte → == padding
• 2 leftover bytes → = padding

Base64 vs Base64URL

Standard Base64 uses + and / as the 62nd and 63rd characters. These are special characters in URLs, which causes problems when Base64 strings appear in query parameters or path segments.

Base64URL swaps them out:

• + → -
• / → _
• Padding (=) is typically stripped

This is the variant used in JWTs, URL-safe tokens, and anywhere Base64 appears in a URL. Our encoder/decoder supports both modes.

Encoding and decoding in practice

JavaScript (browser)

// Encode
btoa('Hello, world!')  // "SGVsbG8sIHdvcmxkIQ=="

// Decode
atob('SGVsbG8sIHdvcmxkIQ==')  // "Hello, world!"

btoa / atob only handle ASCII. For Unicode strings:

// Encode Unicode
btoa(unescape(encodeURIComponent('Hello 🌍')))
// "SGVsbG8g8J+MjQ=="

// Decode Unicode
decodeURIComponent(escape(atob('SGVsbG8g8J+MjQ==')))
// "Hello 🌍"

JavaScript (Node.js)

// Encode
Buffer.from('Hello, world!').toString('base64')
// "SGVsbG8sIHdvcmxkIQ=="

// Decode
Buffer.from('SGVsbG8sIHdvcmxkIQ==', 'base64').toString('utf8')
// "Hello, world!"

// Base64URL
Buffer.from('Hello, world!').toString('base64url')

Python

import base64

# Encode
base64.b64encode(b'Hello, world!').decode()
# 'SGVsbG8sIHdvcmxkIQ=='

# Decode
base64.b64decode('SGVsbG8sIHdvcmxkIQ==').decode()
# 'Hello, world!'

# Base64URL
base64.urlsafe_b64encode(b'Hello, world!').decode()

Command line

# Encode
echo -n 'Hello, world!' | base64
# SGVsbG8sIHdvcmxkIQ==

# Decode
echo 'SGVsbG8sIHdvcmxkIQ==' | base64 --decode
# Hello, world!

Common use cases

JWT tokens All three parts of a JWT (header, payload, signature) are Base64URL encoded. Decoding the first two parts gives you readable JSON.

Data URIs Embedding images directly in HTML or CSS:

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

HTTP Basic Authentication The Authorization: Basic header carries username:password as Base64:

Authorization: Basic dXNlcjpwYXNzd29yZA==

Decode that and you get user:password. This is why Basic Auth must always be used over HTTPS — the encoding provides zero protection.

Storing binary data in JSON or databases JSON has no binary type. If you need to include binary data (an image, a file) in a JSON payload, Base64 is the standard way to do it.

Email attachments (MIME) Email attachments are Base64-encoded inside MIME multipart messages.

What Base64 is NOT

• Not encryption — anyone can decode it
• Not compression — Base64 output is ~33% larger than the input
• Not hashing — it’s fully reversible

If you need security, use actual encryption. If you need to verify integrity without revealing content, use a hash function like SHA-256.

Size overhead

Base64 increases data size by approximately 33%. Every 3 bytes becomes 4 characters. For large payloads — like a high-resolution image embedded as a data URI — this overhead matters for performance.