What is Base64 Encoding? Complete Guide

Base64 encoding converts binary data into ASCII text using a set of 64 printable characters. It is used to safely transmit binary content over text-based protocols like HTTP and email, and to embed images or files directly in HTML, CSS, and JSON payloads without corruption or data loss.

Why Base64 Exists

Many protocols — SMTP, HTTP headers, XML — were designed to carry text, not arbitrary binary bytes. When you send binary data through these channels raw, certain byte values get interpreted as control characters, line breaks, or null terminators, which corrupts the payload. Base64 solves this by mapping every possible byte sequence to a safe subset of printable ASCII characters.

How Base64 Works: 6-Bit Groups

Base64 works by re-grouping binary data from 8-bit bytes into 6-bit chunks.

1. Take three bytes of input (24 bits total).
2. Split into four 6-bit groups.
3. Map each 6-bit value (0–63) to a character in the Base64 alphabet.

The Base64 alphabet uses:

• A–Z (values 0–25)
• a–z (values 26–51)
• 0–9 (values 52–61)
• + and / (values 62–63)
• = as padding

Example:

Input:  "Man"
Binary: 01001101 01100001 01101110
Groups: 010011 010110 000101 101110
Values: 19     22     5      46
Output: T      W      F      u  → "TWFu"

When the input length is not divisible by three, = or == padding is appended.

Encoding and Decoding in JavaScript

Modern JavaScript provides built-in Base64 support for browser environments:

// Encode
const encoded = btoa("Hello, World!");
console.log(encoded); // "SGVsbG8sIFdvcmxkIQ=="

// Decode
const decoded = atob("SGVsbG8sIFdvcmxkIQ==");
console.log(decoded); // "Hello, World!"

For Node.js (v16+), use Buffer:

// Encode
const encoded = Buffer.from("Hello, World!").toString("base64");

// Decode
const decoded = Buffer.from("SGVsbG8sIFdvcmxkIQ==", "base64").toString("utf8");

URL-Safe Base64

Standard Base64 uses + and /, which are reserved characters in URLs. URL-safe Base64 replaces them:

Standard	URL-Safe
+	-
/	_
=	omitted or %3D

JWT tokens use URL-safe Base64 without padding. When you decode a JWT payload, you need to restore the padding before decoding:

function decodeJwtPayload(token) {
  const [, payload] = token.split(".");
  const padded = payload.replace(/-/g, "+").replace(/_/g, "/");
  const padLength = (4 - (padded.length % 4)) % 4;
  return JSON.parse(atob(padded + "=".repeat(padLength)));
}

Data URIs

Data URIs embed file content directly into HTML or CSS using Base64:

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

<!-- Inline SVG in CSS -->
.icon {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucy...");
}

Data URIs are useful for:

• Small icons that reduce HTTP requests
• Offline/PWA apps that need embedded assets
• Email templates where external images are blocked

Avoid data URIs for large images. They increase HTML size, bypass browser caching, and cannot be lazy-loaded.

Common Use Cases

HTTP Basic Authentication

The Authorization header uses Base64 to encode credentials:

Authorization: Basic dXNlcjpwYXNzd29yZA==

This decodes to user:password. Base64 here provides encoding, not encryption — always use HTTPS.

Email Attachments (MIME)

SMTP transfers email as text. MIME encodes binary attachments as Base64 blocks:

Content-Transfer-Encoding: base64

SGVsbG8sIFdvcmxkIQ==

API Responses

Some APIs return binary data (thumbnails, PDFs) as Base64 strings inside JSON:

{
  "filename": "report.pdf",
  "content": "JVBERi0xLjQK..."
}

Base64 Is Not Encryption

Base64 is reversible with no key — anyone can decode it instantly. It provides zero security. Never use Base64 to "hide" passwords, API keys, or sensitive data.

Size Overhead

Base64 increases data size by approximately 33%: every 3 bytes become 4 characters. For a 1 MB binary file, the Base64 representation is about 1.37 MB. Combine with gzip compression when transmitting over the wire to partially recover the size.

Original Size	Base64 Size
1 KB	~1.37 KB
100 KB	~137 KB
1 MB	~1.37 MB

Try It Now

Use the Base64 Encoder/Decoder Tool to encode and decode strings, files, and data URIs directly in your browser — no data leaves your machine.

Summary

• Base64 converts binary to text using 64 printable characters
• Works by regrouping 8-bit bytes into 6-bit chunks
• URL-safe variant replaces +// with -/_
• Used in HTTP auth, email attachments, data URIs, and APIs
• Not encryption — provides no security guarantees
• Adds ~33% size overhead

More Tools from Cosyslabs

Working with binary data and file formats? These Cosyslabs tools cover adjacent use cases:

• PDF Convert All — Convert, merge, compress, and extract PDFs online. Useful when you need to handle PDF binary content rather than embedding it as a Base64 data URI.
• Unit Convert All — Convert data storage sizes (bytes ↔ KB ↔ MB ↔ GB) to understand the size overhead introduced by Base64 in your pipeline.
• Routine Toolkit — Everyday productivity utilities including a word counter, loan calculator, and date difference tool.
• Cosyslabs — The studio behind Dev Tools !, PDF Convert All, Astrilio, CastFleet, and more.