Base64 Encoder & Decoder

About This Tool

Base64 encoding is a fundamental technique in web development, allowing developers to represent binary data as ASCII text. This is essential for embedding images in HTML/CSS, transmitting files through JSON APIs, encoding authentication credentials, and ensuring data integrity across different systems. Every day, millions of API requests include Base64-encoded payloads for file uploads, authentication headers, and data serialization. While the concept is simple, manually encoding or decoding Base64 can be error-prone and time-consuming. Incorrectly encoded strings cause broken images, failed API calls, and authentication errors that are difficult to debug. This free Base64 encoder and decoder provides instant, real-time conversion in both directions. Simply paste your text to encode it to Base64, or paste Base64 strings to decode them back to readable text. Upload files directly to get their Base64 representation for embedding in code. See character counts, size changes, and get immediate feedback on invalid Base64 input. Toggle URL-safe mode for JWT tokens and URL parameters. Your data stays completely private and nothing is stored or shared. Perfect for developers working with APIs, email systems, data URLs, or any application that requires Base64 encoding.

What is Base64 Encoding?

Base64 is an encoding method that converts binary data into a text format using 64 printable ASCII characters. The character set consists of:

• Uppercase letters: A-Z (26 characters)
• Lowercase letters: a-z (26 characters)
• Digits: 0-9 (10 characters)
• Special characters: + and / (2 characters)
• Padding character: = (used to align the output)

Base64 works by taking every 3 bytes (24 bits) of input data and dividing them into 4 groups of 6 bits each. Each 6-bit group represents a number from 0-63, which maps to one of the 64 characters in the Base64 alphabet.

For example, encoding the word "Man" in Base64:

• M = 77 (binary: 01001101)
• a = 97 (binary: 01100001)
• n = 110 (binary: 01101110)
• Combined: 010011 010110 000101 101110
• Base64 indices: 19, 22, 5, 46
• Base64 result: "TWFu"

The padding character (=) is added when the input length is not divisible by 3, ensuring the output is always a multiple of 4 characters.

Why Base64 Increases File Size by 33%

A crucial aspect of Base64 encoding is understanding its overhead. Because Base64 uses 6 bits per character to represent data (instead of the standard 8 bits per byte), there's an inherent size increase:

• Input: 3 bytes = 24 bits of data
• Output: 4 Base64 characters = 32 bits (4 × 8 bits per ASCII character)
• Efficiency: 24 bits of data requires 32 bits to transmit = 75% efficiency
• Overhead: 33% increase in size (32/24 = 1.33)

This means a 1 MB binary file becomes approximately 1.33 MB when Base64 encoded. For large files or bandwidth-constrained applications, this overhead matters significantly.

When to worry about overhead:

• Embedding large images in HTML/CSS (consider external files instead)
• Mobile applications with limited bandwidth
• APIs returning large amounts of binary data

When overhead is acceptable:

• Small images (icons, logos under 10 KB) in CSS
• Authentication tokens and API keys
• Email attachments (MIME requires Base64)
• JSON payloads with small binary blobs

Common Base64 Use Cases in Development

1. Data URLs for Images:

Embedding small images directly in HTML or CSS eliminates HTTP requests:

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

Best for: Icons, small logos, inline SVGs. Avoid for: Large photos, hero images.

2. HTTP Basic Authentication:

The Authorization header encodes credentials as Base64:

Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=

Note: Base64 is NOT encryption. HTTPS is required for security.

3. JSON with Binary Data:

JSON only supports text, so binary data (images, PDFs) must be Base64 encoded:

{
  "filename": "document.pdf",
  "content": "JVBERi0xLjQKJeLjz9MK..."
}

4. Email Attachments (MIME):

Email protocols were designed for 7-bit ASCII text. MIME uses Base64 to send binary attachments:

Content-Type: application/pdf
Content-Transfer-Encoding: base64

JVBERi0xLjQKJeLjz9MK...

5. CSS Background Images:

Reduce HTTP requests by embedding small backgrounds:

.icon {
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...);
}

6. Storing Binary Data in Databases:

Some databases (especially older ones) store binary data as Base64 text fields to avoid BLOB complexity.

Base64 vs URL-Safe Base64

Standard Base64 uses + and / characters, which have special meaning in URLs. For URL parameters or filenames, use URL-safe Base64 (also called Base64URL):

• Standard Base64: + and /
• URL-safe Base64: - and _ (hyphen and underscore)
• Padding: Often omitted in URL-safe variant

Example:

• Standard: a+b/c==
• URL-safe: a-b_c (padding removed)

Used in: JWT tokens, OAuth, Google APIs, file-safe identifiers.

JavaScript Conversion:

// Standard to URL-safe
const urlSafe = base64.replace(/+/g, '-').replace(///g, '_').replace(/=/g, '');

// URL-safe to Standard
let standard = urlSafe.replace(/-/g, '+').replace(/_/g, '/');
while (standard.length % 4) standard += '=';

Security Notes for Base64

A common misconception is that Base64 provides some level of security. It does not. Base64 is a reversible encoding, not encryption. Here are important security considerations:

• Never use Base64 to hide passwords: Anyone can decode Base64 instantly. If you see credentials encoded in Base64 (like in HTTP Basic Auth headers), they are only safe if transmitted over HTTPS.
• JWT tokens are Base64-encoded, not encrypted: The payload of a JSON Web Token is simply Base64URL-encoded. Anyone who intercepts a JWT can read its contents. The security comes from the signature, not the encoding.
• Data URLs expose content: Embedding sensitive data as Base64 data URLs in HTML makes it readable in the page source. Avoid embedding private information this way.
• For actual security: Use proper encryption algorithms (AES-256, RSA) first, then optionally Base64-encode the encrypted output for safe text transmission.

This tool keeps your data completely private. Nothing is stored or transmitted, making it safe to use with sensitive content during development and testing.

Frequently Asked Questions