Base64 Encoding Guide — How It Works & When to Use It

Base64 is one of the most widely used encoding schemes in web development, yet many developers use it without fully understanding how it works. This guide explains Base64 from the ground up and covers practical use cases. Try it yourself with our free Base64 Encoder/Decoder.

What Is Base64?

Base64 is a binary-to-text encoding scheme that represents binary data using 64 printable ASCII characters. It converts every 3 bytes of binary data into 4 ASCII characters, making binary content safe to transmit over text-based protocols like HTTP, SMTP, and JSON.

The name “Base64” comes from the 64 characters used in the encoding alphabet: A–Z, a–z, 0–9, +, and /, plus = for padding.

How Base64 Encoding Works

The encoding process follows three steps:

Convert input to binary — Each character is converted to its 8-bit binary representation.
Split into 6-bit groups— The binary stream is divided into groups of 6 bits (since 2⁶ = 64).
Map to Base64 characters — Each 6-bit group maps to one of the 64 characters in the Base64 alphabet.

For example, encoding the text Hi:

"Hi" → ASCII: 72 105 → Binary: 01001000 01101001 → 6-bit: 010010 000110 1001xx → Padded: 010010 000110 100100 → Base64: S G k = → Result: "SGk="

Base64 in JavaScript

JavaScript provides built-in functions for Base64 encoding and decoding:

// Encoding btoa("Hello, World!") // "SGVsbG8sIFdvcmxkIQ==" // Decoding atob("SGVsbG8sIFdvcmxkIQ==") // "Hello, World!" // For Unicode strings (modern approach) const encoded = btoa( new TextEncoder().encode("Hello ").reduce( (s, b) => s + String.fromCodePoint(b), "" ) );

Note: btoa() only works with Latin-1 characters. For Unicode, use TextEncoder as shown above.

Common Use Cases

1. Data URIs (Inline Images)

Embed small images directly in HTML or CSS without separate HTTP requests:

2. Email Attachments (MIME)

Email protocols like SMTP are text-based. Binary attachments (images, PDFs) must be Base64-encoded to travel safely through email servers.

3. JWT Tokens

JSON Web Tokens use Base64url encoding (a URL-safe variant) for the header and payload sections. The three parts separated by dots are each Base64url-encoded JSON.

4. API Data Transfer

When sending binary data (files, images) through JSON APIs, Base64 encoding lets you include the data as a regular string field.

Base64 vs Base64url

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

Character	Base64	Base64url
Index 62	`+`	`-`
Index 63	`/`	`_`
Padding	Required (=)	Optional / omitted

Use Base64url whenever the encoded string may appear in a URL, filename, or cookie.

Size Impact

Base64 encoding increases data size by approximately 33%. Every 3 bytes of input becomes 4 bytes of output. For a 1 MB image, the Base64 version is about 1.33 MB. Keep this in mind when deciding between inline data URIs and separate file requests.

Rule of thumb: Use Base64 data URIs for images smaller than 10 KB. For larger files, serve them as separate resources to take advantage of browser caching and parallel downloads.

Common Mistakes

Using Base64 for encryption — Base64 is encoding, not encryption. Anyone can decode it. Never use it to protect sensitive data.
Encoding large files inline — A 500 KB image becomes ~667 KB of Base64 text that cannot be cached separately by the browser.
Ignoring Unicode — JavaScript’s btoa() throws on non-Latin-1 characters. Always encode Unicode strings with TextEncoder first.
Mixing Base64 and Base64url — Using standard Base64 in URLs will break if the string contains + or /.

Try Base64 Encoding & Decoding

Paste any text or data and instantly encode or decode with our free tool. No sign-up, 100% private.

Open Base64 Encoder/Decoder