Base64 Codec

How to Use This Base64 Encoder and Decoder

Converting between plain text and Base64 is straightforward with this tool. Follow these steps to encode or decode your data:

1. Select your mode: Click "Encode" to convert plain text to Base64, or "Decode" to convert Base64 back to readable text. The active mode is highlighted to show your current selection.

2. Enter your input: Paste your text, JSON, code snippet, or Base64 string into the input field. The tool accepts any UTF-8 text for encoding, or valid Base64 strings for decoding.

3. Click the action button: Press "Encode" or "Decode" (depending on your selected mode) to process your input. The conversion happens instantly in your browser.

4. Copy your result: The output appears in the result panel below. Click the "Copy" button to copy the encoded or decoded text to your clipboard with one click.

5. Iterate as needed: Switch between modes and process multiple strings without page reloads. Each conversion clears the previous output automatically.

What is Base64 Encoding?

Base64 is a binary-to-text encoding scheme that converts binary data into a sequence of printable ASCII characters. The name comes from the 64 characters used in the encoding alphabet: uppercase letters A-Z (26 characters), lowercase letters a-z (26 characters), digits 0-9 (10 characters), and two additional symbols (typically + and /). A padding character (=) is used when the input data does not divide evenly.

The encoding works by taking groups of three bytes (24 bits) from the input and splitting them into four groups of six bits each. Each six-bit group maps to one of the 64 characters in the Base64 alphabet. Since 2^6 = 64, each character can represent exactly six bits of the original binary data.

Why Base64 Exists

Base64 encoding solves a fundamental problem in computing: how to transmit binary data through systems designed only for text. Many protocols and storage systems were built to handle ASCII text characters but struggle with or corrupt raw binary data. Email, for example, was designed for 7-bit ASCII text, which means sending a binary file directly would result in data corruption.

By converting binary data to Base64, you transform any file or data stream into safe ASCII characters that survive transmission through text-only channels. The tradeoff is that Base64-encoded data is approximately 33% larger than the original binary data because you're representing every three bytes with four characters.

The Base64 Character Set

Standard Base64 (RFC 4648) uses this 64-character alphabet:

• Indices 0-25: Uppercase letters A-Z
• Indices 26-51: Lowercase letters a-z
• Indices 52-61: Digits 0-9
• Index 62: Plus sign (+)
• Index 63: Forward slash (/)
• Padding: Equals sign (=)

URL-safe Base64 (Base64URL) replaces the + and / characters with - and _ respectively, and typically omits padding. This variant is used in URLs, filenames, and JSON Web Tokens where the standard characters would cause issues.

Common Use Cases for Base64 Encoding

Base64 encoding appears throughout modern software development. Understanding where and why it's used helps you work more effectively with APIs, authentication systems, and data formats.

API Development and HTTP Headers

HTTP Basic Authentication encodes credentials in Base64. When you authenticate with a username and password, the browser concatenates them with a colon separator and Base64-encodes the result. This encoded string goes into the Authorization header:

Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=

Decoding dXNlcm5hbWU6cGFzc3dvcmQ= reveals username:password. While Base64 provides no security on its own, it ensures the credentials survive HTTP header transmission. The actual security comes from HTTPS encryption of the entire request.

Many REST APIs also accept Base64-encoded binary data in JSON payloads. Since JSON only supports text, any binary data (images, files, certificates) must be Base64-encoded for inclusion in JSON requests or responses.

JWT Token Debugging

JSON Web Tokens (JWTs) are ubiquitous in modern authentication. A JWT consists of three Base64URL-encoded sections separated by dots:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

Each section decodes to JSON:

• Header: Contains the algorithm and token type
• Payload: Contains claims about the user and token metadata
• Signature: Verifies the token wasn't tampered with (cannot be decoded meaningfully)

When debugging authentication issues, decoding the header and payload sections reveals the token's contents, expiration time, and user claims. This Base64 decoder makes that process instant.

Data URIs for Web Assets

Data URIs let you embed files directly in HTML, CSS, or JavaScript by Base64-encoding their contents:

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

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

This technique eliminates HTTP requests for small assets like icons, logos, and decorative elements. Each embedded asset reduces round trips to the server, which can improve initial page load times, especially on high-latency connections.

However, Data URIs have tradeoffs:

• Size increase: Base64 adds 33% overhead, so a 10KB image becomes about 13.3KB
• No caching: Embedded assets cannot be cached separately from the HTML/CSS
• Parse overhead: Browsers must decode Base64 before rendering

Best practice is to use Data URIs only for assets under 10KB. Larger files benefit more from separate HTTP requests with proper caching headers.

Email Attachments and MIME

Email protocols were designed for 7-bit ASCII text, but modern email needs to carry binary attachments. MIME (Multipurpose Internet Mail Extensions) solves this by Base64-encoding attachments and embedding them in the email body:

Content-Type: image/png; name="screenshot.png"
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename="screenshot.png"

iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4
//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==

When you send an email with attachments, your email client encodes each file as Base64. The recipient's client decodes it back to the original file. This encoding adds about 37% overhead due to line length limits in MIME (76 characters per line), but ensures attachments survive transmission through any email server.

Configuration and Environment Variables

Modern applications often need to store complex data in environment variables or configuration files that only support strings. Base64 encoding provides a clean solution:

# Store a multi-line private key in an environment variable
PRIVATE_KEY=$(echo "$KEY_CONTENT" | base64)

# In your application, decode it at runtime
key = base64.b64decode(os.environ['PRIVATE_KEY'])

This pattern is common for:

• TLS certificates and private keys
• JSON configuration blobs
• Binary secrets in CI/CD systems
• Multi-line strings in environment variables

Base64 Encoder Features Explained

This online Base64 tool includes features designed for developer workflows:

Full UTF-8 Support

Unlike some Base64 implementations that only handle ASCII, this tool fully supports UTF-8 encoding. You can encode and decode:

• International characters (accented letters, non-Latin alphabets)
• Emoji and special Unicode symbols
• Multi-byte character sequences
• Any valid UTF-8 text

The tool uses the TextEncoder and TextDecoder Web APIs to properly handle UTF-8 conversion before Base64 encoding, avoiding the common pitfalls of btoa() and atob() functions which fail on non-ASCII characters.

Instant Browser-Side Processing

All encoding and decoding happens locally in your browser. Your data never leaves your device or gets sent to any server. This provides:

• Privacy: Sensitive data stays on your machine
• Speed: No network latency for conversions
• Offline capability: Works without an internet connection once loaded

Error Handling for Invalid Input

When decoding, the tool validates that your input is legitimate Base64. If you paste malformed data (invalid characters, incorrect padding, or corrupted strings), you'll receive a clear error message rather than garbage output or a silent failure.

Common issues the tool helps you identify:

• Extra whitespace or line breaks in Base64 strings
• Invalid characters not in the Base64 alphabet
• Missing or incorrect padding characters
• Input that was double-encoded

One-Click Copy

The copy button transfers your output directly to the clipboard without selecting text. This streamlines workflows where you're processing multiple strings or integrating outputs into code.

Technical Deep Dive: How Base64 Encoding Works

Understanding the Base64 algorithm helps you debug encoding issues and choose the right variant for your use case.

The Encoding Algorithm

Base64 encoding follows these steps:

1. Convert input to bytes: Text is first converted to a byte sequence using UTF-8 encoding. Each character becomes one or more bytes.

2. Group into 24-bit chunks: The byte stream is divided into groups of three bytes (24 bits).

3. Split into 6-bit groups: Each 24-bit chunk splits into four 6-bit groups.

4. Map to Base64 characters: Each 6-bit value (0-63) maps to its corresponding character in the Base64 alphabet.

5. Add padding if needed: If the input byte count isn't divisible by 3, padding characters (=) are added to make the output length a multiple of 4.

For example, encoding "Hi" (two bytes: 0x48 0x69):

Input bytes:  01001000 01101001
Grouped:      010010 000110 1001xx
6-bit values: 18, 6, 36
Characters:   S, G, k
With padding: SGk=

Padding Explained

Base64 output is always a multiple of 4 characters. When the input doesn't divide evenly by 3 bytes:

• 0 remainder: No padding needed
• 1 remainder: Two padding characters (==)
• 2 remainder: One padding character (=)

Some implementations (like Base64URL in JWTs) omit padding since the original length can be inferred. When decoding padless Base64, you may need to add padding characters manually.

URL-Safe Base64

Standard Base64 includes + and / characters that have special meaning in URLs and filenames. Base64URL replaces these:

Standard	URL-Safe
+	-
/	_
= (padding)	often omitted

When working with JWTs, URL parameters, or filenames, use Base64URL encoding. This tool handles standard Base64; for URL-safe encoding, you may need to replace characters manually or use a specialized URL-safe encoder.

Frequently Asked Questions

What is the difference between Base64 encoding and encryption?

Base64 encoding transforms data into a different representation but provides zero security. Anyone can decode Base64 using freely available tools or built-in browser functions like atob(). Encryption, by contrast, transforms data using a secret key so that only authorized parties can read it. Use Base64 for compatibility and transport; use encryption for confidentiality. Never rely on Base64 alone to protect sensitive information.

Why does Base64 encoding increase file size?

Base64 represents every 3 bytes of input with 4 characters of output, increasing size by approximately 33%. This happens because Base64 uses only 64 printable ASCII characters, requiring more characters to represent the same information. Additionally, MIME-formatted Base64 adds line breaks every 76 characters, increasing overhead to about 37%. This size increase is the tradeoff for safe transmission through text-only systems.

How do I decode Base64 in JavaScript?

In browsers, use atob() for ASCII strings: const decoded = atob(base64String). For UTF-8 support, decode the Base64 first, then convert the binary string to UTF-8:

function decodeBase64UTF8(base64) {
  const binary = atob(base64);
  const bytes = Uint8Array.from(binary, c => c.charCodeAt(0));
  return new TextDecoder().decode(bytes);
}

This tool uses this exact approach to properly handle international characters and emoji.

What causes "invalid Base64" decoding errors?

Decoding errors typically occur from: invalid characters not in the Base64 alphabet (anything besides A-Z, a-z, 0-9, +, /, =), incorrect or missing padding, extra whitespace or line breaks, or data that was encoded differently (like Base64URL vs standard Base64). Verify your input only contains valid Base64 characters and check whether padding was stripped during transmission.

Can I use Base64 for images in CSS and HTML?

Yes, through Data URIs. Prefix your Base64-encoded image with the appropriate MIME type: data:image/png;base64, for PNG images, data:image/jpeg;base64, for JPEGs, or data:image/svg+xml;base64, for SVGs. This works best for small images under 10KB. Larger images should be served as separate files to benefit from browser caching and avoid blocking page rendering.

Is Base64 the same as Base64URL?

No. Base64URL is a variant that replaces + with -, / with _, and typically omits padding. This makes the output safe for URLs and filenames where standard Base64 characters have special meaning. JWTs use Base64URL for their header and payload sections. When decoding JWTs or URL parameters, you may need to convert Base64URL back to standard Base64 by replacing characters and adding padding.

How does Base64 work in JWT tokens?

JWTs consist of three Base64URL-encoded sections separated by periods. The header contains metadata about the token type and signing algorithm. The payload contains claims (user data, expiration time, permissions). The signature verifies integrity. To inspect a JWT, split it by periods and decode the first two sections (header and payload). The third section is a cryptographic signature that won't decode to readable text.

What is the maximum size for Base64 encoding?

There's no theoretical limit to Base64 encoding, but practical limits exist. Modern browsers support Base64 strings up to hundreds of megabytes (Firefox and Chrome support up to 512MB for Data URIs). However, encoding large files in the browser can freeze the UI, and large Base64 strings consume significant memory. For files over a few megabytes, consider streaming uploads or binary transfer protocols instead of Base64 encoding.

Why do email attachments use Base64?

Email protocols (SMTP) originally supported only 7-bit ASCII text. Binary attachments would be corrupted during transmission because the eighth bit of each byte might be stripped. Base64 encoding converts binary files to safe ASCII characters that survive any email server. While modern email systems often support 8-bit data, Base64 remains the standard for compatibility with legacy infrastructure.

How do I encode special characters like emoji in Base64?

This tool handles emoji and special characters automatically through UTF-8 encoding. The input text is first converted to UTF-8 bytes using TextEncoder, then those bytes are Base64 encoded. When decoding, the process reverses: Base64 to bytes, then bytes to UTF-8 text using TextDecoder. Browser functions like btoa() and atob() alone cannot handle characters outside the Latin-1 range, which is why this two-step approach is necessary.

Related Developer Tools

Explore other Forgedock tools that complement your Base64 encoding workflow:

• Color Shade Generator: Create accessible color palettes with WCAG contrast checking for your web applications.
• Layout Builder: Visually design responsive layouts and export production-ready CSS code.