Base64 encoding appears across nearly every layer of modern software development: in JWT headers, API authentication, image CSS embedding, email attachments, and more. Yet most developers use it without understanding why it exists or when not to use it.

Encode or decode Base64 instantly with our free Base64 Encoder/Decoder — no data uploaded, everything in your browser.

Why Does Base64 Exist?

The root cause: many communication systems were designed for 7-bit ASCII text (US English characters only). Binary data — images, audio files, compiled code — contains bytes with values 0-255, many of which are "control characters" that older systems interpret as commands (newline, carriage return, null byte, etc.) rather than data.

Base64 was invented to safely transmit binary data over these text-only channels by representing all binary data using only 64 printable ASCII characters.

The 64 characters are: A-Z (26), a-z (26), 0-9 (10), + (1), / (1) = 64 total. Every byte of any binary data can be represented using only these safe characters.

How Base64 Works (The Math)

Base64 takes 3 bytes of binary input (24 bits) and converts them to 4 printable ASCII characters.

The process:

1. Take 3 bytes: M, a, n = binary 01001101 01100001 01101110
2. Group into 4 × 6-bit chunks: 010011 010110 000101 101110
3. Convert each 6-bit value to its Base64 character: T W F u
4. Result: TWFu

Verify: paste TWFu into our Base64 Decoder and get back Man. The size overhead: 3 bytes become 4 characters — a 33% size increase. This is the tradeoff Base64 makes for universal compatibility. Padding (=): If input length isn't divisible by 3, = characters pad the output to a multiple of 4.

• 1 remaining byte → 2 Base64 chars + ==
• 2 remaining bytes → 3 Base64 chars + =

When to Use Base64

1. Embedding Images in HTML and CSS

Without Base64, an image requires a separate HTTP request:

<img src="/images/logo.png">

With Base64, embed the image directly (no extra request):

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

When it makes sense: Small icons (under 1KB) where the HTTP request overhead exceeds the size increase from Base64. For images over 10KB, separate files are faster due to HTTP/2 multiplexing and browser caching.

2. HTTP Basic Authentication

HTTP Basic Auth transmits credentials as Base64 in the Authorization header:

Authorization: Basic cmFtOm15cGFzc3dvcmQ=

Decode cmFtOm15cGFzc3dvcmQ= with our decoder and you get ram:mypassword. This is why Basic Auth requires HTTPS — Base64 is encoding, not encryption. Anyone who intercepts the header can trivially decode the credentials.

3. JWT Token Structure

JWT tokens use Base64URL (a URL-safe variant) for the header and payload:

eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxMjM0In0.SIGNATURE

Decode the first part: {"alg":"HS256"} (header) Decode the second part: {"sub":"1234"} (payload)

Base64URL differs from standard Base64 by replacing + with - and / with _, making it safe for URLs without encoding. Use our JWT Decoder for JWT-specific decoding with structured output.

4. Sending Binary Data in JSON APIs

JSON only supports text. When an API needs to return binary data — a PDF file, an image, an audio clip — Base64 is the standard way to embed it:

{
  "filename": "invoice.pdf",
  "content": "JVBERi0xLjQKJcOkw7z...",
  "encoding": "base64"
}

The client decodes the content field to get the original PDF bytes.

5. Email Attachments (MIME)

SMTP (email protocol) is text-only. Email clients encode file attachments in Base64 before transmission using MIME (Multipurpose Internet Mail Extensions):

Content-Type: application/pdf; name="report.pdf"
Content-Transfer-Encoding: base64
JVBERi0xLjQKJcOkw7zDpMO8...

This is handled transparently by email clients. Understanding it matters when debugging MIME messages or building email sending functionality.

When NOT to Use Base64

Don't Use It as Encryption

Base64 is encoding, not encryption. It is completely reversible without any key — anyone can decode it. Using Base64 to "hide" sensitive data provides zero security and creates a false sense of security.

// BAD: This hides nothing
const "encrypted" = btoa("password123");
// -> "cGFzc3dvcmQxMjM="
// Anyone can decode: atob("cGFzc3dvcmQxMjM=") -> "password123"

For actual encryption, use AES-GCM (symmetric) or RSA/ECDSA (asymmetric) with a proper cryptographic library.

Don't Use It for Large Files

The 33% size overhead matters at scale. A 10MB image becomes 13.3MB as Base64. For large files:

• Use direct binary transfer (multipart/form-data for uploads)
• Use object storage URLs (S3, GCS) rather than embedding content
• Use streaming when possible

Don't Use It in URLs Unless Using Base64URL

Standard Base64 uses + and / which have special meaning in URLs. Always use Base64URL (replacing +→- and /→_) for URL parameters, or percent-encode the standard Base64 string.

Base64 in JavaScript

// Encode (browser)
btoa("Hello, World!"); // "SGVsbG8sIFdvcmxkIQ=="
// Decode (browser) atob("SGVsbG8sIFdvcmxkIQ=="); // "Hello, World!"
// Note: btoa/atob only work reliably with ASCII. // For Unicode strings: btoa(unescape(encodeURIComponent("नमस्ते"))); // Encode decodeURIComponent(escape(atob(encoded))); // Decode

Base64 in Node.js

// Encode
Buffer.from("Hello, World!").toString("base64");
// "SGVsbG8sIFdvcmxkIQ=="
// Decode Buffer.from("SGVsbG8sIFdvcmxkIQ==", "base64").toString("utf8"); // "Hello, World!"
// Base64URL Buffer.from("Hello!").toString("base64url"); // Uses - and _ instead of + and /

Base64 in Python

import base64
Encode
encoded = base64.b64encode(b"Hello, World!")
b'SGVsbG8sIFdvcmxkIQ=='
Decode
decoded = base64.b64decode(b"SGVsbG8sIFdvcmxkIQ==")
b'Hello, World!'
URL-safe Base64
encoded_url = base64.urlsafe_b64encode(b"Hello!")

Quick Reference

Scenario	Use Base64?
Small icon in CSS	Yes (< 1KB)
Large image	No — use separate file
HTTP Basic Auth	Yes (protocol requirement)
JWT payload	Yes (Base64URL — automatic)
Storing a password	No — use bcrypt/Argon2
Binary in JSON API	Yes
URL parameter	Base64URL only

Use our Base64 Encoder/Decoder for quick encoding and decoding in the browser — UTF-8 supported, nothing transmitted to any server.