Base64 Encode Decode Online
Base64 encode decode online tools are essential for developers working with APIs, tokens, and web assets. Whether you are debugging a JWT token, embedding an image in CSS, or inspecting an email attachment, being able to convert to and from Base64 instantly saves time every day.
This guide explains how Base64 works, shows real code examples, and highlights the fastest free tools available in your browser.
What Is Base64?
Base64 is a binary-to-text encoding that maps binary data to 64 printable ASCII characters: A–Z, a–z, 0–9, +, and /. The = character is used as padding to make the output length a multiple of 4.
The key thing to understand: Base64 is not encryption. It is a lossless encoding. Any string can be decoded without a key, which means it adds zero security. It exists purely to make binary data safe to transmit through text-only channels like HTTP headers, email (MIME), or JSON fields.
Quick Example
Original: Hello, Developer!
Base64: SGVsbG8sIERldmVsb3BlciE=
The = at the end is padding. Two = characters mean the original had two leftover bytes.
When Do Developers Use Base64?
1. JWT Tokens
JSON Web Tokens are three Base64url-encoded segments separated by dots:
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOjEyMywicm9sZSI6ImFkbWluIn0.xyz
Each segment decodes to readable JSON. You do not need a secret key to read the header or payload — only to verify the signature.
2. Data URIs for Images
Embed small images directly in CSS or HTML without an extra HTTP request:
.icon {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANS...");
}
This is useful for tiny icons, loading spinners, or SVG assets you want to keep inline.
3. HTTP Basic Authentication
The Authorization header sends credentials as user:password encoded in Base64:
Authorization: Basic dXNlcjpwYXNzd29yZA==
Decode dXNlcjpwYXNzd29yZA== and you get user:password. This is why HTTPS is mandatory when using Basic Auth — the encoding provides no security.
4. JSON and API Payloads
Some APIs encode binary blobs (like images, certificates, or file contents) in Base64 inside JSON:
{
"filename": "report.pdf",
"content": "JVBERi0xLjQKJcOkw7zDtsO...",
"encoding": "base64"
}
How to Base64 Encode and Decode in Code
JavaScript (Browser or Node.js)
// Encode
const encoded = btoa("Hello, Developer!");
console.log(encoded); // "SGVsbG8sIERldmVsb3BlciE="
// Decode
const decoded = atob("SGVsbG8sIERldmVsb3BlciE=");
console.log(decoded); // "Hello, Developer!"
Note: btoa() and atob() only work with ASCII strings. For Unicode, convert to bytes first:
// Unicode-safe encode
const unicodeEncode = (str) =>
btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
(_, p1) => String.fromCharCode(parseInt(p1, 16))));
// Unicode-safe decode
const unicodeDecode = (str) =>
decodeURIComponent(atob(str).split('').map(
(c) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
).join(''));
Python
import base64
# Encode
encoded = base64.b64encode(b"Hello, Developer!").decode("utf-8")
print(encoded) # SGVsbG8sIERldmVsb3BlciE=
# Decode
decoded = base64.b64decode("SGVsbG8sIERldmVsb3BlciE=").decode("utf-8")
print(decoded) # Hello, Developer!
# URL-safe variant (for JWTs)
url_encoded = base64.urlsafe_b64encode(b"Hello!").decode("utf-8")
Command Line
# Encode
echo -n "Hello, Developer!" | base64
# SGVsbG8sIERldmVsb3BlciE=
# Decode
echo "SGVsbG8sIERldmVsb3BlciE=" | base64 --decode
# Hello, Developer!
# Encode a file
base64 image.png > image.b64
# Decode a file
base64 --decode image.b64 > image_restored.png
Base64 vs Base64url
Standard Base64 uses + and /, which are not URL-safe. Base64url replaces them:
| Standard | URL-safe | Used In |
|---|---|---|
+ |
- |
JWTs, OAuth tokens |
/ |
_ |
Google API keys |
= (padding) |
omitted | Most URL contexts |
When decoding a JWT manually, remember to add padding back before calling atob():
function decodeJwtPart(part) {
// Add padding if needed
const padded = part + '='.repeat((4 - part.length % 4) % 4);
return JSON.parse(atob(padded.replace(/-/g, '+').replace(/_/g, '/')));
}
Free Online Tools for Base64
DevPlaybook Base64 Encoder/Decoder — Handles text, JSON, and file input. Works entirely in your browser with no data sent to any server.
Image to Base64 Converter — Upload an image and get the data URI for CSS or HTML embedding.
For JWT-specific inspection, the JWT Decoder shows the decoded header, payload, and expiry time in a readable format.
Common Base64 Mistakes
Mistake 1: Encoding JSON twice
If you JSON-stringify an object and then Base64-encode the string, you will end up with double-encoded data. Always encode the final string, not an intermediate representation.
Mistake 2: Using standard Base64 for URLs
Putting a standard Base64 string in a URL will break because + becomes a space and = needs to be percent-encoded. Use Base64url instead.
Mistake 3: Treating Base64 as secure
Base64 in an Authorization header, cookie, or localStorage provides no confidentiality. Always encrypt data that needs protection — Base64 is just a display format.
Summary
Base64 encode decode online tools are a daily utility for working with tokens, APIs, and web assets. The encoding is simple, reversible, and adds about 33% overhead. The most important things to remember:
- Use standard
btoa()/atob()for ASCII, or handle Unicode encoding explicitly - Use Base64url for JWTs and URLs
- Never treat Base64 as a security measure
For fast, private Base64 conversion, use the DevPlaybook Base64 tool — no server, no storage, just instant conversion.
Level Up Your Developer Workflow
If Base64 and encoding utilities are part of your daily work, the Developer Productivity Bundle includes 51 VSCode snippets, 40 Git aliases, and Docker templates to speed up your full development environment setup — $29, one-time.
Level Up Your Dev Workflow
Found this useful? Explore DevPlaybook — cheat sheets, tool comparisons, and hands-on guides for modern developers.
🛒 Get the DevToolkit Starter Kit on Gumroad — 40+ browser-based dev tools, source code + deployment guide included.
Top comments (0)