Base64 Encode & Decode Online - Free Tool

Base64 Encoding and Decoding: A Practical Guide

Binary data does not travel well through text-only channels. Email attachments, JSON API payloads, data URIs in CSS, and JWT tokens all need to represent arbitrary bytes using only printable ASCII characters. Base64 solves this: it encodes any sequence of bytes into a string that contains only letters, digits, plus, and slash — safe to embed in JSON, XML, HTML, URLs, and email headers without corruption from character set conversions or line-ending normalization.

This tool encodes and decodes Base64 directly in your browser. Paste text or Base64-encoded content, toggle between encode and decode, and get the result instantly. No server round-trip, no upload, no data leaving your device.

How It Works

Base64 works by taking every three bytes (24 bits) of input and splitting them into four 6-bit groups. Each 6-bit value maps to one of 64 characters: uppercase letters A-Z, lowercase letters a-z, digits 0-9, plus, and slash. Padding with equals signs handles inputs that are not multiples of three bytes.

To encode: paste any text into the input field, click Encode, and the Base64 representation appears in the output. The tool handles UTF-8 text correctly — non-ASCII characters like accented letters, CJK characters, and emoji are encoded as UTF-8 bytes first, then Base64-encoded from those bytes. To decode: paste a Base64 string, click Decode, and the original text or binary data is reconstructed.

Two specialized modes handle common edge cases. URL-Safe Base64 replaces the standard plus and slash characters with hyphen and underscore and strips the equals-sign padding, making the output safe for URL path segments and query parameters without percent-encoding. Base64 for Data URIs wraps the encoded output in the data URI prefix — useful for embedding small images or fonts directly in CSS or HTML without separate HTTP requests.

By default the tool uses standard Base64 with padding. The encoding is deterministic: the same input always produces the same Base64 output. This property is essential for content-addressable storage systems, cache keys, and integrity verification workflows where the encoded string serves as a stable identifier.

Real-World Scenarios

Embedding images in CSS and HTML. A frontend developer needs to inline a small icon or logo directly in a stylesheet to avoid an extra HTTP request for a critical-path asset. They Base64-encode the PNG file using the data URI mode, paste the resulting string into a background-image: url(data:image/png;base64,...) declaration, and the icon renders without a separate network round-trip.

Debugging JWT tokens. A backend developer receives a bug report about an authentication failure. The JWT token in the Authorization header looks like eyJhbGciOi...base64string.... They split the token on dots, copy the payload segment (the middle part), paste it into the decoder, and immediately see the decoded JSON claims — revealing that the exp timestamp has already passed. Debugging a JWT without Base64 decoding means staring at opaque encoded strings.

API payloads with binary content. A mobile developer's REST API needs to accept user profile images as part of a JSON payload. Rather than setting up a separate multipart upload endpoint, they Base64-encode the image bytes on the client, include the encoded string in the JSON body, and the server decodes it before writing to storage. The JSON remains valid, the image data survives JSON serialization, and no separate upload infrastructure is needed.

Email attachment handling. An email processing script extracts attachments from MIME messages. The attachment bodies arrive as Base64-encoded strings wrapped between Content-Transfer-Encoding: base64 headers. The developer pastes the encoded block into the decoder, clicks decode, and has the original file bytes ready for saving or further processing.

Common Issues

Decoding fails with "invalid input" errors. Base64 strings must only contain the 64 encoding characters plus equals padding. If your string includes whitespace, newlines, or characters outside this set, trim them first. MIME Base64 is often wrapped at 76 characters per line; the tool handles this automatically but some edge cases from malformed email encoders may need manual cleanup.

Decoded result is garbled or empty. The most common cause is encoding mismatch. If the original data was binary (an image, a PDF, or a ZIP file) and you decode it as text, the result will look like garbage. Conversely, if text was encoded as UTF-8 and decoded as Latin-1, non-ASCII characters will be corrupted. Know whether your source data is text or binary before decoding.

URL-Safe vs standard Base64 confusion. JWTs and some OAuth implementations use URL-safe Base64 (hyphens and underscores, no padding). If you decode a URL-safe string in standard mode, the hyphens and underscores will produce incorrect byte values. Always check which variant your system uses. The URL-Safe toggle on this tool switches the character set instantly.

Base64 expands data size by approximately 33%. Every three input bytes become four output characters. A 1MB file encoded as Base64 becomes roughly 1.33MB. This is a property of the encoding itself, not the tool — Base64 trades space efficiency for text-safe transport. For very large files, consider binary transfer protocols instead of text encoding.

Privacy

All encoding and decoding operations — UTF-8 conversion, bit grouping, character mapping, URL-safe transformations, and data URI wrapping — execute entirely in your browser using JavaScript. Your data, whether it contains authentication tokens, proprietary binary content, personal images, or confidential API payloads, never leaves your device.

Related Tools

// JavaScript: Encode and decode Base64
const text = "Hello, World!";
const encoded = btoa(text);        // "SGVsbG8sIFdvcmxkIQ=="
const decoded = atob(encoded);     // "Hello, World!"

// With UTF-8 support (handles emoji, non-Latin chars)
const utf8Encoded = btoa(unescape(encodeURIComponent("Cafe")));