Make Tools
2026-04-08

Base64 Encoding Explained

Understand how Base64 encoding works, when to use it, and how to encode and decode data safely across different platforms and languages.

Base64EncodingData

What Is Base64 Encoding?

Base64 is a binary-to-text encoding scheme that converts binary data into an ASCII string format. It takes 3 bytes of binary data (24 bits) and represents them as 4 printable ASCII characters. The "64" refers to the 64 characters used in the encoding alphabet: A-Z, a-z, 0-9, +, and /.

Base64 is not encryption. It provides zero security — anyone can decode a Base64 string instantly. It's purely a transport encoding designed to ensure binary data survives passage through text-only systems.

How the Encoding Works

The algorithm breaks input bytes into 6-bit groups, each mapping to one of 64 characters:

Input:  "Man" (3 bytes = 24 bits)
Binary: 01001101 01100001 01101110
6-bit:  010011 010110 000101 101110
Index:     19     22      5     46
Char:      T      W      F      u
Output: "TWFu"

When the input length isn't a multiple of 3, padding characters (=) are appended:

  • 1 byte remaining → 2 Base64 chars + 2 padding: AA==
  • 2 bytes remaining → 3 Base64 chars + 1 padding: AAA=

Common Use Cases

Data URIs in HTML and CSS

Embed images directly in HTML or CSS files using Base64 data URIs, eliminating extra HTTP requests:

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

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

HTTP Basic Authentication

HTTP Basic Auth encodes username:password in Base64 for the Authorization header. Remember, this is not secure without HTTPS — the Base64 is trivially reversible:

Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=

Decoding dXNlcm5hbWU6cGFzc3dvcmQ= gives you username:password. Always use HTTPS with Basic Auth.

Email Attachments (MIME)

Email protocols were designed for 7-bit ASCII. Base64 encodes binary attachments (PDFs, images, ZIP files) so they can travel through email servers without corruption. The MIME header Content-Transfer-Encoding: base64 signals this encoding.

JSON Web Tokens (JWT)

JWTs use Base64URL encoding (a URL-safe variant) for their three parts: header, payload, and signature. Our JWT Decoder handles this automatically.

Base64URL vs Standard Base64

Standard Base64 uses + and /, which have special meanings in URLs. Base64URL substitutes these with - and _, and typically omits padding:

Standard: SGVsbG8gV29ybGQ+
URL-safe: SGVsbG8gV29ybGQ-

Use Base64URL when encoding data for URLs, filenames, or JWTs. Our Base64 Encoder supports both variants.

Encoding and Decoding in Code

JavaScript

// Encode
const encoded = btoa('Hello World');      // "SGVsbG8gV29ybGQ="
const decoded = atob(encoded);             // "Hello World"

// For Unicode strings
const encoded = btoa(unescape(encodeURIComponent('你好')));
const decoded = decodeURIComponent(escape(atob(encoded)));

Python

import base64

encoded = base64.b64encode(b'Hello World').decode()  // "SGVsbG8gV29ybGQ="
decoded = base64.b64decode(encoded).decode()          // "Hello World"

# URL-safe variant
encoded = base64.urlsafe_b64encode(b'Hello World').decode()

Command Line

# Encode
echo -n "Hello World" | base64
# Output: SGVsbG8gV29ybGQ=

# Decode
echo "SGVsbG8gV29ybGQ=" | base64 -d
# Output: Hello World

Size Overhead

Base64 increases data size by approximately 33%. Every 3 bytes of input becomes 4 bytes of output. For a 1MB file, the Base64 version is roughly 1.33MB. Keep this in mind when embedding large assets as data URIs — the performance cost of a larger HTML file might outweigh the HTTP request saved.

Common Pitfalls

Unicode Handling

The built-in btoa() function in JavaScript only handles Latin characters. Attempting to encode Chinese, Japanese, or emoji directly throws an error. Always encode to UTF-8 bytes first:

// Wrong — throws InvalidCharacterError
btoa('你好世界')

// Right
btoa(unescape(encodeURIComponent('你好世界')))

Line Breaks

Some Base64 encoders insert newline characters every 76 characters (MIME standard). When decoding, strip whitespace first, or use a decoder that handles it automatically.

Base64 for File Transfers

When you need to embed a file in a JSON payload, XML document, or database text field, Base64 is the standard solution. The tradeoff is the 33% size increase versus the convenience of treating binary data as text.

For quick encoding and decoding of files or text, try our Base64 Encoder — it handles both text and file input directly in your browser.

Conclusion

Base64 is one of those foundational encodings every developer encounters repeatedly. Understanding when to use it — and when not to — prevents common bugs around data corruption, Unicode handling, and security assumptions. It's encoding, not encryption. Keep that distinction clear.

Ready to try it?

Open Tool →
← Back to Blog