Base64 Encoder & Decoder

What is Base64 Encoding?

Last Updated: February 20, 2026

Base64 is a binary-to-text encoding scheme that converts binary data into an ASCII string format. It's primarily used to encode binary data (such as images, files, or encrypted data) so it can be safely transmitted through systems designed to handle only text, such as email, JSON APIs, or XML documents.

The name "Base64" comes from the fact that it uses 64 different ASCII characters to represent data: A-Z, a-z, 0-9, plus two additional characters (+ and /), along with = for padding. This encoding method is standardized in RFC 4648, which our tool fully complies with.

How Base64 Works

Base64 encoding works by taking every 3 bytes (24 bits) of binary data and converting them into 4 ASCII characters (each representing 6 bits). Here's the process:

1. Split into 6-bit chunks: Binary data is divided into groups of 6 bits
2. Map to character set: Each 6-bit chunk is mapped to one of 64 characters
3. Add padding: If needed, = characters are added to make the output length a multiple of 4

This transformation ensures that binary data can pass through systems that might otherwise corrupt or reject non-text data, such as email protocols or web APIs that expect JSON strings.

History and Purpose

Base64 encoding was originally developed in the 1980s for email systems (MIME - Multipurpose Internet Mail Extensions) to handle attachments. Before Base64, email could only reliably transmit 7-bit ASCII text. Binary files like images, PDFs, or executables would get corrupted during transmission.

Today, Base64 is widely used for:

• Embedding images directly in HTML or CSS (data URIs)
• Transmitting binary data in JSON/XML APIs
• Storing binary data in databases that only support text
• Encoding basic authentication credentials in HTTP headers
• Storing small files in configuration files or source code

How to Use Our Base64 Encoder & Decoder

Encoding Text to Base64

1. Select the Encode tab at the top of the tool
2. Choose Text as your input type (default)
3. Type or paste your text into the "Input Text" area
4. Click Encode to Base64 to convert your text
5. The encoded Base64 string appears in the "Base64 Output" panel
6. Use Copy Output to copy to clipboard or Download to save as a file

Encoding Images to Base64

1. Select the Encode tab
2. Click the Image/File button
3. Drag and drop an image or click to browse your files
4. The tool automatically encodes it to a Base64 data URI
5. Preview the image to confirm it's correct
6. Copy the data URI to use in HTML <img src="..."> or CSS background-image: url(...)

Decoding Base64 to Text

1. Select the Decode tab
2. Paste your Base64-encoded string into the "Base64 Input" area
3. Click Decode from Base64
4. The original text appears in the "Decoded Output" panel
5. If the Base64 represents an image, a preview is shown automatically

Base64 Encoding Examples

Here are practical examples showing how different types of data look when Base64 encoded:

When to Use Base64 Encoding

1. Embedding Images in HTML/CSS

One of the most common uses of Base64 is creating data URIs for small images, icons, or graphics. This eliminates the need for separate HTTP requests:

<img src="data:image/png;base64,iVBORw0KG..." alt="Logo">

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

Best for: Small icons (< 5KB), inline SVGs, favicons

Avoid for: Large images (>10KB) due to 33% size increase and slower rendering

2. API Data Transmission

Many REST APIs and webhooks use JSON to exchange data. Since JSON doesn't support binary data natively, Base64 encoding allows you to include files, images, or binary content within JSON payloads:

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

This is essential for APIs that need to send or receive file attachments, PDF documents, or encrypted data.

3. Email Attachments (MIME)

Email protocols (SMTP) were originally designed for 7-bit ASCII text only. Base64 encoding allows binary files (attachments) to be included in email messages through MIME (Multipurpose Internet Mail Extensions). Every email attachment you've ever received was likely Base64 encoded during transmission.

4. Storing Binary Data in Databases

Some legacy databases or text-based storage systems don't handle binary data well. Base64 encoding converts binary files into text strings that can be safely stored in VARCHAR or TEXT columns.

Note: Modern databases support BLOB (Binary Large Object) fields, which are more efficient than Base64 for this purpose.

5. Basic HTTP Authentication

HTTP Basic Authentication uses Base64 to encode credentials (username:password) in the Authorization header:

Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=

Security Warning: Base64 is NOT encryption! Basic Auth should only be used over HTTPS.

Base64 in Web Development

Embedding Images in CSS

Base64 data URIs can significantly improve page load performance for small images by reducing HTTP requests. Instead of loading an external image file, the image data is embedded directly in your CSS:

.logo {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...);
  width: 100px;
  height: 50px;
}

Performance Benefits:

• Eliminates HTTP round-trip for small images (< 5KB)
• Reduces time to first contentful paint (FCP)
• Works offline immediately (no 404 errors)
• Useful for critical above-the-fold content

Performance Downsides:

• 33% larger file size than original binary
• Can't be cached separately from CSS file
• Increases CSS file size, blocking render
• Not suitable for large images (>10KB)

Data URIs in HTML

You can embed images directly in HTML using Base64 data URIs:

<img 
  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0i..." 
  alt="Icon"
  width="24"
  height="24"
>

This technique is particularly useful for:

• SVG icons: Small vector graphics that change frequently
• Email HTML: Ensures images display without external resource blocking
• Single-page apps: Bundled assets that load immediately
• Offline-first PWAs: Critical UI elements available without network

JavaScript Usage with FileReader API

Modern web applications often need to upload images or files. The FileReader API can convert files to Base64 for AJAX uploads:

const fileInput = document.getElementById('file');
fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();
  
  reader.onload = () => {
    const base64String = reader.result.split(',')[1];
    // Send to API
    fetch('/api/upload', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ image: base64String })
    });
  };
  
  reader.readAsDataURL(file);
});

Canvas to Base64 Image

HTML5 Canvas elements can export their contents as Base64-encoded images:

const canvas = document.getElementById('myCanvas');
const dataURL = canvas.toDataURL('image/png');
// dataURL is now a Base64 data URI

// Download the image
const link = document.createElement('a');
link.download = 'canvas-image.png';
link.href = dataURL;
link.click();

This is commonly used in image editors, signature capture tools, photo filters, and chart generators.

Performance Considerations

While Base64 encoding is convenient, it's important to understand its performance impact:

• Size Penalty: Base64 increases data size by ~33%. A 100KB image becomes 133KB.
• No Browser Caching: Embedded Base64 data can't be cached separately. External images can be cached by the browser.
• Parsing Overhead: Browsers must decode Base64 strings, adding processing time.
• CSS Blocking: Large Base64 strings in CSS delay initial render.

Best Practice: Use Base64 for small assets (< 5KB) like icons, but load larger images as separate files with proper caching headers.

Base64 vs Other Encoding Methods

Base64 vs Hexadecimal (Hex)

Base64: Uses 64 characters (A-Z, a-z, 0-9, +, /). Each character represents 6 bits. Results in 33% size increase.

Hexadecimal: Uses 16 characters (0-9, A-F). Each character represents 4 bits. Results in 100% size increase (double).

Example:

• Original: "Hello" (5 bytes)
• Base64: "SGVsbG8=" (8 characters, 8 bytes)
• Hex: "48656C6C6F" (10 characters, 10 bytes)

When to use Hex: Color codes in CSS, memory addresses, cryptocurrency addresses, hash values (MD5, SHA). Hex is more human-readable for technical data.

When to use Base64: Email attachments, data URIs, JSON APIs, storing binary in databases. Base64 is more compact.

Base64 vs URL Encoding (Percent Encoding)

Base64: Converts binary to text using 64-character alphabet. Not URL-safe by default (contains +, /, =).

URL Encoding: Escapes special characters for use in URLs. Replaces unsafe characters with % followed by hex code.

Base64URL Variant: A URL-safe version of Base64 that replaces + with -, / with _, and removes = padding. Used in JWT tokens and OAuth.

Example:

• Standard Base64: "SGVsbG8gV29ybGQh"
• Base64URL: "SGVsbG8gV29ybGQh" (same in this case, but differs with +, /, =)
• URL Encoded: "Hello%20World!" (for text with spaces)

Base64 vs Compression (Gzip)

Base64 is encoding, not compression. It actually increases data size by 33%. Compression algorithms like Gzip reduce data size.

Best Practice: Compress first, then Base64 encode if needed:

1. Original file: 1000KB
2. Gzip compression: 200KB
3. Base64 encoding: 267KB

This is common in email attachments: files are often compressed, then Base64 encoded for MIME transmission.

Security Considerations

Base64 is Encoding, Not Encryption

This is the most important thing to understand about Base64: it is not secure. Base64 encoding is completely reversible without any key or password. It's designed for data transmission, not data protection.

What Base64 does: Converts binary data to ASCII text for compatibility

What Base64 does NOT do: Protect data from unauthorized access

Common Security Mistakes

• ❌ Storing passwords in Base64: Anyone can decode it instantly. Use bcrypt, Argon2, or PBKDF2 for password hashing.
• ❌ "Hiding" API keys in Base64: Source code is public. Use environment variables and proper key management.
• ❌ Base64 encoding sensitive URLs: Still visible to anyone who intercepts traffic. Use HTTPS and proper authentication.
• ❌ Trusting Base64 data from users: Always validate and sanitize. Base64 can contain executable code.

When is Base64 Safe to Use?

Base64 is perfectly safe for non-sensitive data transmission:

• ✅ Embedding images in CSS/HTML (public data)
• ✅ API payloads for non-sensitive files
• ✅ Email attachments (MIME)
• ✅ Configuration data that isn't secret

Proper Security Alternatives

For actual security, use these instead:

• Encryption: AES-256, RSA for sensitive data
• Hashing: SHA-256, bcrypt for passwords and integrity checks
• HTTPS/TLS: For data in transit over networks
• OAuth/JWT: For authentication tokens (which may contain Base64URL-encoded data, but are signed)

Code Injection Risks

Base64-encoded data can contain malicious code. Always validate data before using it:

• Check file types and MIME types
• Validate maximum size limits
• Sanitize output when displaying user-uploaded Base64 images
• Use Content Security Policy (CSP) headers to prevent inline script execution

Frequently Asked Questions

Related Developer Tools