🔐 Base64 Encoder / Decoder

Encoding and Decoding Base64 Streams

Base64 is a group of binary-to-text encoding schemes that represent binary data in an ASCII string format. It is widely used to embed images, files, or binary data directly within CSS files, HTML documents, or JSON payloads without requiring external network requests. This tool supports instant text encoding/decoding and file uploading.

Step-by-Step Guide

1. Select Mode — Use the tab switch to toggle between Text Mode and File Mode.
2. Text Mode — Type or paste text on the left, then click Encode or Decode to view the translated ASCII output on the right.
3. File Mode — Drag and drop or upload any file (images, PDFs, documents) on the left to instantly receive its Base64-encoded Data URL string.
4. Copy Output — Copy the output string or click Download File in decode mode to download the decoded binary back to your device.

What is Base64 Encoding?

Computer systems transfer binary data (composed of raw 8-bit bytes) across various networks. However, some legacy protocols (like SMTP email or URL query strings) are designed to handle only 7-bit ASCII text characters.

Base64 encoding translates every 3 bytes of raw binary data (24 bits) into 4 printable ASCII characters (each representing 6 bits) from a safe 64-character set:

• Uppercase letters: A-Z (26)
• Lowercase letters: a-z (26)
• Numbers: 0-9 (10)
• Special characters: + and / (2)
• Padding character: = (used at the end when the input data is not a multiple of 3 bytes)

Code Snippets

Base64 Encoding and Decoding in Browser JavaScript

// Encoding Unicode Strings safely in modern browsers
function encodeBase64(str) {
  return btoa(unescape(encodeURIComponent(str)));
}

function decodeBase64(str) {
  return decodeURIComponent(escape(atob(str)));
}

const original = "Hello World! ⚡";
const encoded = encodeBase64(original);
console.log(encoded); // "SGVsbG8gV29ybGQhIOKagQ=="

const decoded = decodeBase64(encoded);
console.log(decoded); // "Hello World! ⚡"

Base64 Encoding and Decoding in Node.js

// Node.js uses Buffer to handle binary encoding operations
const originalText = "Hello World! ⚡";
const encoded = Buffer.from(originalText, 'utf-8').toString('base64');
console.log("Encoded:", encoded);

const decoded = Buffer.from(encoded, 'base64').toString('utf-8');
console.log("Decoded:", decoded);

Data URIs and Performance Trade-offs

One of the most popular uses of Base64 is the creation of Data URIs, formatted as data:[<mediatype>][;base64],<data>. For example, you can embed a small icon directly in an HTML tag:

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

While this eliminates the latency of a separate HTTP request, Base64 increases the file size by approximately 33%. Therefore, we recommend using Data URIs primarily for small assets (under 10KB) to ensure fast initial page load times.