Base64 Encoder/Decoder: Complete Guide and Free Tool

Base64 is an encoding scheme that converts binary data into safe ASCII format for transmission. Universally used in web development, email, APIs, and data URIs, Base64 is essential for transporting binary data through systems designed for text.

Our online Base64 Encoder/Decoder is completely free, fast, and privacy-first: it processes everything in the browser without sending data to servers. Ideal for encoding/decoding text, files, images, and binary data.

What is Base64 and How Does it Work

Base64 is an encoding method that represents binary data using only 64 printable and safe ASCII characters:

• A-Z: 26 uppercase letters
• a-z: 26 lowercase letters
• 0-9: 10 numeric digits
• + and /: 2 special characters
• =: Padding character (doesn't count in the 64)

How Encoding Works

The Base64 encoding process works like this:

1. Binary Conversion: Each input byte is converted to 8 binary bits
2. Grouping: Bits are grouped into 6-bit blocks (instead of 8)
3. Mapping: Each 6-bit group (value 0-63) is mapped to a character in the Base64 table
4. Padding: If needed, = characters are added to complete 4-character blocks

Practical Example:

Input:  "Man" (3 bytes = 24 bits)
Binary: 01001101 01100001 01101110
Base64: 010011 010110 000101 101110
        M      a      n      →  TWFu

Input:  "Ma" (2 bytes = 16 bits)
Binary: 01001101 01100001
Base64: 010011 010110 0001(00) (padding needed)
        T      W      F      =  TWE=

Why Exactly 64 Characters?

64 is 2^6, so each Base64 character represents exactly 6 bits of information. This allows efficient conversion: 3 bytes (24 bits) become 4 Base64 characters (24 bits).

Efficiency: Base64 increases the size of original data by about 33% (4/3 ratio).

When to Use Base64

1. Embedding Images in HTML/CSS (Data URI)

Include images directly in HTML code without external files:

<!-- Instead of external link -->
<img src="logo.png" />

<!-- Base64 Data URI -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..." />

Advantages:

• Reduces HTTP requests (1 instead of 2)
• Image embedded in CSS/HTML for portability
• Useful for small icons and logos

Disadvantages:

• Increases file size by 33%
• Not separately cacheable
• Discouraged for large images (>10KB)

2. Transmitting Binary Data via JSON

JSON only supports text. To send binary files via JSON API:

{
  "filename": "document.pdf",
  "content": "JVBERi0xLjQKJeLjz9MKMy...",
  "encoding": "base64"
}

Use case: File uploads via REST API, webhook attachments, user avatars.

3. HTTP Basic Authentication

HTTP Basic Auth standard uses Base64 for username:password:

// Credentials: user:password
// Base64: dXNlcjpwYXNzd29yZA==

Authorization: Basic dXNlcjpwYXNzd29yZA==

⚠️ Important: Base64 is NOT secure! Always use HTTPS with Basic Auth, or preferably OAuth2/JWT.

4. Email Attachments (MIME)

Email attachments are encoded in Base64 for transmission via SMTP (text protocol):

Content-Type: image/jpeg; name="photo.jpg"
Content-Transfer-Encoding: base64

/9j/4AAQSkZJRgABAQEAYABgAAD/2wBD...

5. JWT Tokens

JSON Web Tokens use Base64URL (URL-safe variant) for encoding:

// JWT Structure: header.payload.signature
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

6. CSS Sprites and Fonts

Embedding web fonts in CSS:

@font-face {
  font-family: 'CustomFont';
  src: url(data:font/woff2;base64,d09GMgABAAAAABE...) format('woff2');
}

7. Storing Files in Databases

Save binary files in TEXT/VARCHAR fields:

INSERT INTO documents (name, content_base64)
VALUES ('report.pdf', 'JVBERi0xLjQKJe...');

Note: Better to use BLOB/BYTEA fields when possible for efficiency.

How to Use Our Base64 Tool

Encoding Text to Base64

1. Open the Base64 Encoder
2. Select "Text to Base64" tab
3. Paste your text in the input area
4. Base64 result appears instantly
5. Click "Copy" to copy to clipboard

Example:

Input:  Hello, World!
Output: SGVsbG8sIFdvcmxkIQ==

Decoding Base64 to Text

1. Select "Base64 to Text" tab
2. Paste the Base64 string
3. Decoded text appears automatically

Encoding Files (Images, PDF, etc)

1. Click "Upload File" or drag & drop
2. Tool automatically generates:
   • Pure Base64 string
   • Complete Data URI (with MIME type)
3. Use "Copy Data URI" for HTML/CSS

Example Output:

// Pure Base64
iVBORw0KGgoAAAANSUhEUgAAAAUA...

// Data URI for HTML
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...

Decoding File from Base64

1. Paste Base64 string in input
2. Tool automatically detects file type
3. Preview (if image)
4. Click "Download" to save original file

Practical Code Examples

JavaScript (Browser)

// Encoding
const text = "Hello World";
const encoded = btoa(text); // SGVsbG8gV29ybGQ=

// Decoding
const decoded = atob(encoded); // Hello World

// File to Base64
function fileToBase64(file) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = (e) => resolve(e.target.result);
    reader.readAsDataURL(file);
  });
}

// Usage
const file = document.querySelector('input[type="file"]').files[0];
const dataURL = await fileToBase64(file);
console.log(dataURL); // data:image/png;base64,...

Node.js

// Encoding
const text = "Hello World";
const encoded = Buffer.from(text).toString('base64');
console.log(encoded); // SGVsbG8gV29ybGQ=

// Decoding
const decoded = Buffer.from(encoded, 'base64').toString('utf8');
console.log(decoded); // Hello World

// File encoding
const fs = require('fs');
const fileBuffer = fs.readFileSync('image.png');
const base64 = fileBuffer.toString('base64');

// File decoding
const fileData = Buffer.from(base64, 'base64');
fs.writeFileSync('output.png', fileData);

Python

import base64

# Encoding
text = "Hello World"
encoded = base64.b64encode(text.encode()).decode()
print(encoded)  # SGVsbG8gV29ybGQ=

# Decoding
decoded = base64.b64decode(encoded).decode()
print(decoded)  # Hello World

# File encoding
with open('image.png', 'rb') as f:
    encoded = base64.b64encode(f.read()).decode()

# File decoding
with open('output.png', 'wb') as f:
    f.write(base64.b64decode(encoded))

PHP

// Encoding
$text = "Hello World";
$encoded = base64_encode($text);
echo $encoded; // SGVsbG8gV29ybGQ=

// Decoding
$decoded = base64_decode($encoded);
echo $decoded; // Hello World

// File
$fileContent = file_get_contents('image.png');
$encoded = base64_encode($fileContent);

Base64 vs. Alternative Encoding

Encoding	Characters	Overhead	URL-Safe	Common Use
Base64	64	+33%	No (+ and /)	Email, JSON, data URI
Base64URL	64	+33%	Yes (- and _)	JWT, URL parameters
Hex	16	+100%	Yes	Hash, colors, debug
Base32	32	+60%	Yes	TOTP codes, DNS
ASCII85	85	+25%	No	PDF, PostScript

When to Use What

• Base64: Default standard for most cases
• Base64URL: When you need to include encoding in URLs (JWT, query params)
• Hex: Debug, hash visualization, CSS colors (#RRGGBB)
• Base32: QR codes, 2FA TOTP secrets (Google Authenticator)

Security and Best Practices

⚠️ Base64 is NOT Encryption

This is the most common mistake. Base64 is encoding, NOT encryption:

• Encoding: Reversible transformation without key (anyone can decode)
• Encryption: Requires secret key to decrypt (secure against attackers)

DO NOT use Base64 for:

• ❌ Hiding passwords
• ❌ Protecting API keys
• ❌ "Encrypting" sensitive data
• ❌ Authentication tokens without HTTPS

For real security, use:

• ✅ AES (symmetric encryption)
• ✅ RSA (asymmetric encryption)
• ✅ bcrypt/Argon2 (password hashing)
• ✅ HTTPS/TLS (secure transport)

✅ Best Practices

• Validate Input: Verify Base64 string is valid before decoding
• Limit Size: Avoid Base64 for very large files (use binary upload instead)
• MIME Type: Always specify MIME type in data URIs
• URL-Safe: Use Base64URL for URL parameters and JWT
• Compression First: Compress data before encoding for efficiency

Common Problems and Solutions

Problem: "Invalid character in base64 string"

Cause: String contains non-Base64 characters (spaces, newlines, special characters)

Solution:

// JavaScript - Clean input
const cleaned = base64String.replace(/[^A-Za-z0-9+/=]/g, '');
const decoded = atob(cleaned);

Problem: Incorrect Padding (missing =)

Cause: Some systems omit padding for brevity

Solution:

function fixPadding(base64) {
  while (base64.length % 4 !== 0) {
    base64 += '=';
  }
  return base64;
}

Problem: Decoded File is Corrupted

Cause: Wrong encoding charset (UTF-16 instead of UTF-8)

Solution: Always use UTF-8 as default charset.

Frequently Asked Questions (FAQ)

Is Base64 secure for passwords?

No, absolutely not. Base64 is easily reversible without a key. For passwords use bcrypt, Argon2, or PBKDF2 with salt.

How much does size increase with Base64?

About 33%. Every 3 bytes become 4 characters. 1MB binary → 1.33MB Base64.

Can I use Base64 in URLs?

Standard Base64 contains + and / which are problematic in URLs. Use Base64URL which replaces + with - and / with _.

Is Base64 slower than binary?

Yes, encoding/decoding has CPU overhead and increases size. For performance-critical applications, use direct binary transfer (multipart/form-data, binary protocols).

How do I remove padding from Base64?

Remove trailing = characters. Note: some decoders require padding, so save it if you need to restore it.

Related Resources

Explore other useful THEJORD tools:

• Hash Generator: Generate MD5/SHA hashes to verify Base64 file integrity
• URL Encoder: Encode Base64 for safe use in URLs
• JSON Formatter: Format JSON with embedded Base64 data
• Diff Checker: Compare Base64 strings to find differences

External Documentation

• RFC 4648 - Base64 Specification
• MDN - btoa() and atob()
• Base64 - Wikipedia

Try the Base64 Tool Now →