How to Use Base64 Encoding

Base64 is an encoding scheme that converts binary data into a string of ASCII characters. It uses 64 characters: A–Z, a–z, 0–9, +, and /, plus = for padding.

Why Base64?

Binary data (images, files, keys) cannot always be transmitted safely through systems that expect text — email protocols, JSON fields, URLs, and CSS data: URIs all require text-safe content. Base64 converts arbitrary bytes into a safe string of printable ASCII characters.

How It Works

Base64 encodes 3 bytes (24 bits) at a time into 4 ASCII characters (6 bits each):

Original bytes:  01001101  01100001  01101110
Split into 6:    010011  010110  000101  101110
Base64 chars:      T       W       F       u

If the input length is not divisible by 3, = padding characters are added.

Base64 in Practice

Encoding a String

btoa("Hello, World!")
// → "SGVsbG8sIFdvcmxkIQ=="

Decoding a String

atob("SGVsbG8sIFdvcmxkIQ==")
// → "Hello, World!"

Embedding an Image in CSS

background-image: url("data:image/png;base64,iVBORw0KGgoAAAA...");

HTTP Basic Authentication

Authorization: Basic dXNlcjpwYXNzd29yZA==

(This is user:password encoded in Base64 — not encrypted!)

Common Pitfalls

1. Base64 is not encryption. It is easily reversed. Never use it to "hide" sensitive data.
2. UTF-8 strings: The browser btoa() function only handles Latin-1 characters. For UTF-8 text (emoji, non-ASCII), use encodeURIComponent first.
3. URL-safe Base64: Standard Base64 uses + and / which are unsafe in URLs. Use URL-safe Base64 (uses - and _ instead) for tokens in URLs.
4. Size overhead: Base64 increases data size by approximately 33% (4 output bytes for every 3 input bytes).

Base64 vs URL Encoding

Feature	Base64	URL Encoding
Purpose	Binary-to-text	URL-safe text
Output	Printable ASCII	Percent-encoded
Size overhead	~33%	Variable
Use case	Files, tokens	Query params, paths

Use the Base64 Encoder/Decoder tool to encode or decode Base64 in your browser instantly.