ToolMint
Developer Tools5 min readMay 17, 2026

What Is Base64 Encoding? A Plain-English Explanation with Examples

You have probably seen Base64 in JWT tokens, CSS data URIs, email attachments, and API responses. It looks like a jumble of letters, numbers, and symbols ending with = signs. This guide explains exactly what Base64 is, why it was created, how the encoding works, and when you should and should not use it.

Why Base64 Exists

Binary data — images, PDFs, executables — consists of byte values from 0 to 255. Many systems that handle text (email protocols, JSON, XML, HTTP headers) were designed with the assumption that they only need to process a subset of ASCII characters. Bytes outside that safe range can be interpreted as control characters and corrupt the data. Base64 solves this by translating every 3 bytes of binary data into 4 printable ASCII characters chosen from a safe set of 64 characters (A–Z, a–z, 0–9, +, /). The result is a string that can safely pass through any text-based system without corruption.

How Base64 Encoding Works

The process takes 3 input bytes (24 bits) at a time and splits them into four 6-bit groups. Each 6-bit value (0–63) maps to one character in the Base64 alphabet. Example: encoding the string 'Man' • M = 0x4D = 01001101 • a = 0x61 = 01100001 • n = 0x6E = 01101110 • Combined 24 bits: 010011010110000101101110 • Split into 4 Ɨ 6-bit groups: 010011 | 010110 | 000101 | 101110 • Values: 19, 22, 5, 46 • Base64 chars: T, W, F, u → 'Man' encodes to 'TWFu' If the input length is not a multiple of 3, padding characters (=) are added to make the output a multiple of 4 characters.

Common Real-World Uses of Base64

1. Data URIs in HTML/CSS: embed images directly in code without a separate file request. img src="data:image/png;base64,iVBORw0KGgoAAAANS..." This eliminates one HTTP request per image — useful for small icons and logos in email templates where external image URLs may be blocked. 2. JWT tokens: the header and payload of a JSON Web Token are Base64url encoded (a URL-safe variant). Decode the payload to see the claims without a library. 3. HTTP Basic Authentication: credentials are Base64 encoded in the Authorization header. Authorization: Basic dXNlcjpwYXNzd29yZA== Decode dXNlcjpwYXNzd29yZA== → user:password. Note: this is encoding, not encryption. 4. Email attachments (MIME): binary attachments are Base64 encoded for transmission over the SMTP text protocol. 5. API payloads: some APIs accept or return binary data (images, documents) as Base64 strings in JSON fields.

When NOT to Use Base64

Base64 increases data size by ~33%. Avoid it when: • Size matters in a hot path: encoding large files to Base64 for storage or transmission wastes significant bandwidth and storage compared to sending the binary directly. • Security is the goal: Base64 is not encryption. Anyone can decode it instantly. Do not use Base64 to obscure sensitive data. • You need compression: Base64 cannot be compressed efficiently by standard algorithms because the character distribution is too uniform. Compress data first, then Base64 encode if needed. For web development: loading large images as Base64 data URIs actually hurts performance because the Base64 string is larger than the binary file, cannot be cached separately, and blocks the initial HTML parse. Use data URIs only for very small images (under 2KB).

Try the tools mentioned in this guide

Frequently Asked Questions

Is Base64 the same as encryption?
No. Base64 is encoding, not encryption. Encryption transforms data so it cannot be read without a key. Base64 is a reversible transformation anyone can decode instantly — it has no security properties whatsoever. Never use Base64 to protect sensitive information.
What is the difference between Base64 and Base64url?
Standard Base64 uses + and / as the 63rd and 64th characters. Base64url replaces + with - and / with _ so the output is safe in URLs and filenames without percent-encoding. Base64url also typically omits the = padding. JWTs use Base64url for all three sections.
How do I decode a Base64 string in JavaScript?
Use atob() for simple strings: atob('SGVsbG8=') returns 'Hello'. For Unicode or binary data, use TextDecoder: new TextDecoder().decode(Uint8Array.from(atob(b64), c => c.charCodeAt(0))). The ToolMint Base64 tool handles Unicode correctly and does not require any code.

Related Guides