Base64 Encoder & Decoder — Free Online Tool

What is Base64 Encoding?

Base64 is a binary-to-text encoding scheme that converts arbitrary binary data into a sequence of 64 printable ASCII characters: uppercase letters (A–Z), lowercase letters (a–z), digits (0–9), plus (+), and forward slash (/). Padding is added with equals signs (=) to ensure the output length is a multiple of four.

The name "Base64" comes from the fact that it uses exactly 64 distinct characters to represent data. Every 3 bytes of input become 4 Base64 characters, which means the encoded output is approximately 33% larger than the original binary.

When to Use Base64

• Embedding images in HTML/CSS — use a data URL (data:image/png;base64,...) to inline small images without extra HTTP requests
• JSON payloads — JSON only supports text; Base64 lets you include binary data like file contents or images in JSON fields
• Email attachments — the MIME standard uses Base64 to encode binary attachments in plain-text email
• HTTP headers and query parameters — safely pass binary values through channels that only accept ASCII
• JWT tokens — the header and payload of a JSON Web Token are Base64URL-encoded
• Storing binary blobs in text databases — encode small binary values for storage in VARCHAR or TEXT columns
• Basic authentication — HTTP Basic Auth encodes credentials as Base64 (username:password)

Base64 in JavaScript

Modern browsers provide two built-in functions for Base64 encoding and decoding. For Unicode text, you need to handle multi-byte characters explicitly:

// Encode a plain ASCII string
const encoded = btoa('Hello, world!');
// → "SGVsbG8sIHdvcmxkIQ=="

// Decode a Base64 string
const decoded = atob('SGVsbG8sIHdvcmxkIQ==');
// → "Hello, world!"

// Encode a UTF-8 string (supports emoji, non-ASCII)
function encodeUTF8(str) {
  const bytes = new TextEncoder().encode(str);
  const binStr = Array.from(bytes, b => String.fromCharCode(b)).join('');
  return btoa(binStr);
}

// Decode a UTF-8 Base64 string
function decodeUTF8(b64) {
  const binStr = atob(b64);
  const bytes = Uint8Array.from(binStr, c => c.charCodeAt(0));
  return new TextDecoder().decode(bytes);
}

// URL-safe Base64 (replace + with - and / with _)
function encodeURLSafe(str) {
  return encodeUTF8(str).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
}

// Node.js (server-side)
const encoded = Buffer.from('Hello').toString('base64');
const decoded = Buffer.from('SGVsbG8=', 'base64').toString('utf8');

// Generate a data URL from a string
function toDataURL(content, mimeType = 'text/plain') {
  return `data:${mimeType};base64,${encodeUTF8(content)}`;
}

Base64 in Real-World Applications

Base64 encoding converts binary data into ASCII text, making it safe to transmit through text-only channels. While conceptually simple, understanding when and how to use Base64 correctly prevents common performance and security mistakes.

When to Use Base64 (and When Not To)

• Use for: Embedding small images in HTML/CSS (data URIs), encoding binary data in JSON payloads, email attachments (MIME encoding), storing binary data in text-only databases or environment variables.
• Don't use for: Large files (Base64 increases size by ~33%), encryption or security (Base64 is encoding, not encryption — anyone can decode it), or when binary transport is available (like multipart/form-data for file uploads).

Base64 Variants You Should Know

• Standard Base64 (RFC 4648): Uses A-Z, a-z, 0-9, +, / with = padding. The default in most languages.
• URL-safe Base64: Replaces + with - and / with _. Essential for URLs, filenames, and cookies where + and / have special meanings. Used by JWTs.
• Base64 without padding: Omits the trailing = characters. Common in JWTs and some APIs. Most decoders handle unpadded input gracefully.

Performance Considerations

Base64 encoding increases data size by approximately 33% (every 3 bytes become 4 characters). For inline images in CSS, this means a 10KB image becomes ~13.3KB of CSS text. For images under 2KB, the overhead is negligible compared to the saved HTTP request. For larger assets, serve them as separate files with proper caching headers instead.

Frequently Asked Questions

What is Base64 encoding?

Base64 is a binary-to-text encoding scheme that represents binary data using 64 printable ASCII characters. It is used to safely transmit binary content — such as images, files, or arbitrary bytes — over channels that only handle text, such as JSON, XML, email, and URLs. Base64 does not compress data; the encoded output is about 33% larger than the input.

When should I use Base64 encoding?

Use Base64 when you need to embed binary data in a text-only context: inline images in HTML or CSS as data URLs, binary fields in JSON API payloads, file attachments in email (MIME), credentials in HTTP Basic Auth headers, and small binary blobs stored in text database columns. For large files, prefer uploading them directly rather than Base64-encoding them, as the size overhead adds up quickly.

Is Base64 a form of encryption?

No — Base64 is purely an encoding scheme, not encryption. It offers zero security or confidentiality. Any Base64 string can be decoded instantly by anyone without a key or password. Never use Base64 to hide sensitive data like passwords, API keys, or personal information. If you need confidentiality, use proper encryption such as AES-256 (symmetric) or RSA (asymmetric).

What is a Base64 data URL?

A data URL embeds file content directly in a URI using Base64 encoding, following the format data:[mime-type];base64,[encoded-data]. For example: data:image/png;base64,iVBORw0KGgo.... Data URLs let you embed small images or files directly in HTML, CSS, or JSON without a separate file request. They are best suited for small assets (under a few kilobytes) since larger data URLs increase page size and cannot be cached by the browser independently of the containing document.

Related Developer Tools

• JWT Decoder & Inspector — decode JSON Web Tokens and inspect header, payload, and expiry claims
• Hash Generator — generate MD5, SHA-1, SHA-256, and SHA-512 hashes from any string
• URL Encoder & Decoder — percent-encode and decode URL components and query strings
• .ENV File Inspector — detect exposed API keys and secrets in environment files