Free Base64 Encoder & Decoder — Auto-Detect, URL-Safe, Data URI, No Upload

Base64 encoding is one of those things developers run into constantly — embedding images in HTML, passing binary through APIs, decoding JWT tokens, configuring email attachments, dealing with PEM certificates — and yet every time I needed to encode or decode something quickly, the tools available felt like they were built in 2009. A textarea, a button, some output. No intelligence. No workflow features. No privacy.

The Base64 Encoder & Decoder on Toolist was built to cover real developer workflows, not just the happy path. Here is what it actually does and why each feature matters.

What is Base64 and why does it come up constantly?

Base64 is a binary-to-text encoding scheme that represents arbitrary binary data using 64 printable ASCII characters (A–Z, a–z, 0–9, +, /). It was designed to solve a specific problem: many systems — email protocols, HTTP headers, JSON fields, XML — are built for text and cannot reliably carry raw binary bytes.

Base64 bridges that gap. It converts every 3 bytes of binary into 4 ASCII characters. The trade-off is a ~33% size increase — an unavoidable consequence of the math (3 bytes = 24 bits; 4 Base64 characters = 4 × 6 bits = 24 bits).

You encounter Base64 in practice across a wide range of workflows:

• JWT tokens — the header and payload of every JSON Web Token are Base64url-encoded
• Data URIs — embedding images and other assets directly in HTML or CSS without a separate HTTP request
• Email attachments — MIME encoding wraps all attachments in Base64 for text-safe transport
• API payloads — passing binary data (images, PDFs) through JSON fields
• HTTP Basic Auth — the Authorization: Basic header encodes username:password in Base64
• PEM certificates — SSL certificates, private keys, and CSRs are Base64-encoded inside the -----BEGIN/END----- wrapper
• Binary config values — embedding small binary blobs in environment variables or YAML configs

Every one of these requires a reliable Base64 tool. This is that tool.

Auto-detect: paste or drop encoded or image or text files, get the right result

The single most common friction in a Base64 workflow is toggling the mode. You paste something, get garbage output, realize you were in Encode instead of Decode, switch, paste again. This tool eliminates that step.

When you paste text into the input panel — either with Ctrl+V directly in the textarea, or by clicking the Paste button — the tool inspects what you pasted. If the content looks like a valid Base64 string (uses only Base64 characters, no internal spaces, passes the decode check), it automatically switches to Decode mode. If it looks like plain text, it stays in Encode mode.

The same logic applies when you drop a text file onto the input panel. Binary files in encode mode bypass auto-detect and stay in encode mode.

You can override the detected mode at any time with the Encode / Decode toggle. Once you manually switch mode, auto-detect stops overriding your choice for that session.

This is a small feature but it removes the single most common mistake when using Base64 tools.

Encoding text: real-time, no button press

Type or paste any text into the input panel and the Base64 output appears in the right panel automatically — no button press, no form submit. The output updates with a short debounce so it feels instant without thrashing on large inputs.

The encoder uses the browser's TextEncoder API to convert your text to UTF-8 bytes before encoding. This means emoji, CJK characters, Arabic, Hebrew, and all other Unicode text encode correctly.

Encoding files: drop a file, copy a Data URI

This is the feature that separates a developer-grade Base64 tool from a plain textarea.

Drag any file directly onto the input panel and it loads instantly — no file picker dialog, no server round-trip. Images (PNG, JPEG, WebP, GIF), PDFs, ZIPs, fonts, audio files — any binary file works.

When you drop or upload an image file, the tool shows a live thumbnail preview in the input panel alongside the filename, file size, and MIME type. For non-image binary files, it shows a hex preview of the first 12 bytes so you can confirm the right file loaded.

The Base64 output appears in the right panel. Then comes the key button: Copy as Data URI.

Click it and you get the complete data:{mime};base64,{content} string — where the MIME type comes directly from the uploaded file — copied to your clipboard. Paste it directly into:

• <img src="data:image/png;base64,…"> in HTML
• background-image: url("data:image/png;base64,…") in CSS
• "logo": "data:image/png;base64,…" in a JSON config

No image hosting. No CDN bucket. No extra HTTP request. For small icons, favicons, and inline logos, Data URIs eliminate an entire category of asset management overhead.

Decoding: recover files from Base64 strings

The decode direction is equally capable. Switch to Decode, paste your Base64 string, and the decoded text appears immediately in the output panel.

For binary content, click Download. The tool decodes the Base64 to raw bytes, then inspects the magic bytes at the start of the binary to detect the file format:

• 89 50 4E 47 → PNG → saves as decoded.png
• FF D8 FF → JPEG → saves as decoded.jpg
• 47 49 46 → GIF → saves as decoded.gif
• 52 49 46 46 … 57 → WebP → saves as decoded.webp
• 25 50 44 46 → PDF → saves as decoded.pdf
• 50 4B 03 04 → ZIP → saves as decoded.zip

If the format is not recognised, the file downloads with a .bin extension. File type detection reads the actual binary signature — not a MIME type string that could be wrong or missing.

URL-safe Base64: required for modern APIs and JWT

Standard Base64 uses + and /, which are reserved characters in URLs. In a query parameter, + decodes as a space and / breaks path parsing. Passing a standard Base64 string through a URL without percent-encoding produces corrupted data.

URL-safe Base64 (RFC 4648 §5) solves this by substituting:

• + → -
• / → _
• = padding removed entirely

Enable the URL Safe checkbox and the output switches to this format automatically. The decoder also accepts URL-safe input — it normalises both variants before decoding, so you can paste either format without switching any setting.

Use URL-safe Base64 for:

• JWT tokens — header, payload, and signature all use URL-safe Base64
• Query parameters — ?token=abc-def_ghi instead of ?token=abc%2Bdef%2Fghi
• Filenames — Base64-encoded filenames with - and _ instead of + and /
• OAuth state parameters — state= values in OAuth 2.0 flows
• HTTP headers — custom headers carrying encoded payloads

MIME line breaks: email and PEM compatibility

RFC 2045 (MIME) requires Base64-encoded email content to be split into lines no longer than 76 characters. PEM format — used for SSL certificates and private keys — uses 64-character lines. Some systems reject Base64 that does not follow these line length rules.

Enable the Line Breaks toggle and the output is wrapped at the configured line width. The default is 76 characters (MIME standard). Change it to 64 for PEM, or any other value your target format requires — the input accepts any width from 1 to 999.

The decoder strips all whitespace before decoding, so you can paste MIME-formatted or PEM-formatted Base64 in decode mode and it works without any pre-processing.

Swap: round-trip testing in one click

The ⇄ button between the two panels flips input and output and toggles the mode simultaneously — but only when output exists and there is no decode error.

Encode some text → click Swap → the Base64 output is now the input in Decode mode → the decoded text appears in the output panel. If it matches your original input, the round-trip is clean.

This is the fastest way to verify that your encoding pipeline is correct — especially when testing URL-safe or line-broken Base64 where the encoding options affect the output format.

Size comparison: see the trade-off immediately

Below the two panels, a size indicator shows input size, output size, and the percentage change — for example 48.3 KB → 64.4 KB (+33%) when encoding, or 64.4 KB → 48.3 KB (-25%) when decoding.

The ~33% overhead of Base64 is the constant trade-off developers make when embedding binary in text. Seeing it displayed explicitly makes the decision to use a Data URI versus an external asset reference a concrete calculation rather than a vague concern.

Why browser-only processing is the privacy decision that matters

Most online Base64 tools send your data to a server. When you click encode or decode, your content goes to their infrastructure, gets processed, and the result comes back. For plain text, this might seem harmless. For the actual use cases, it is not.

Think about what commonly gets Base64-encoded:

• JWT tokens — contain session state, user IDs, permissions, and possibly PII
• API keys — many services use Base64-encoded key:secret pairs in headers
• SSL certificates and private keys — the most security-sensitive artifacts in your infrastructure
• Binary config files — database connection strings, service account credentials

Pasting any of these into a tool that sends data to a server means a third party's infrastructure has processed your production credentials or internal data. That is a security incident risk that will not show up in your logs.

This tool processes everything using browser-native APIs: btoa() and atob() for core encoding and decoding, TextEncoder / TextDecoder for Unicode text handling, and FileReader for reading binary files. None of this involves a network connection.

Your data never leaves your device.

Real developer workflows: how I actually use this

Decoding a JWT payload

Paste the JWT payload segment (the middle part, between the two dots) into the input panel. The tool detects it as URL-safe Base64 and switches to Decode mode. The JSON claims appear in the output — without sending the token to any external service.

Embedding a small icon in a React component

Drop the PNG onto the input panel. The thumbnail appears. Click Copy as Data URI. Paste into src={…} in the component. The icon is inlined — no separate network request, no assets folder to manage.

Checking a PEM certificate

Copy the raw Base64 lines between -----BEGIN CERTIFICATE----- and -----END CERTIFICATE-----. Paste into the input — the tool strips the whitespace and decodes. Click Download to save the decoded binary (downloads as .bin since DER format is not auto-detected — rename to .der to open in certificate tools or pass directly to openssl x509 -inform DER).

Testing an email attachment encoding

Enable Line Breaks at 76 characters (the MIME standard). Encode the file. Copy the output. The format is correct without any manual wrapping.

Round-trip verification

Enable URL Safe. Encode a token payload. Click Swap. Verify the decoded output matches the original. One click — no copy-pasting between panels.

How to use the Base64 Encoder & Decoder

1. Open the Base64 Encoder & Decoder.
2. Select Encode or Decode mode — or paste content and let auto-detect handle it.
3. For text: type or paste directly into the input panel. Output appears immediately.
4. For files: drag any file onto the input panel, or click File to pick one.
5. Enable URL Safe if the output needs to be safe in URLs, JWT tokens, or filenames.
6. Enable Line Breaks and set the width to 76 (MIME) or 64 (PEM) if your target requires wrapped lines.
7. Click Copy to copy the output text to clipboard.
8. In Encode mode with a file loaded, click Copy as Data URI to get the complete data:{mime};base64,… string.
9. Click Download to save the output — .base64.txt in encode mode, or the detected binary format (or .bin) in decode mode.
10. Click ⇄ (Swap) to flip input and output and toggle mode — only available when output exists and there is no error.
11. Check the size indicator below the panels to see input size, output size, and the percentage change.
12. Click Reset to clear everything and start fresh.

What makes this the best free Base64 tool online

| Feature | Most tools | This tool | |---|---|---| | Encode text | ✓ | ✓ | | Decode Base64 | ✓ | ✓ | | Auto-detect mode on paste | ✗ | ✓ | | File / binary encoding | Sometimes | ✓ | | Image thumbnail preview | ✗ | ✓ | | Hex preview for non-image binary | ✗ | ✓ | | Copy as Data URI | ✗ | ✓ | | URL-safe encoding | Sometimes | ✓ | | MIME line breaks (configurable width) | Sometimes | ✓ | | Swap input ↔ output + toggle mode | ✗ | ✓ | | Binary file download on decode | ✗ | ✓ | | Magic-byte file type detection | ✗ | ✓ | | Size comparison with % change | ✗ | ✓ | | Drag & drop files | Rarely | ✓ | | Browser-only, no upload | Rarely | ✓ | | Free, no account | ✓ | ✓ |

The tool in one sentence

If you work with Base64 and want a single browser tab that handles encoding, decoding, file encoding, Data URI generation, URL-safe output, MIME line breaks, round-trip swap, binary file download, and size tracking — all without sending a single byte to any server — this is it.

Open the Base64 Encoder & Decoder →