Developer Tools
Free Base64 Encoder & Decoder Online
Encode text to Base64 or decode Base64 strings back to plain text.
What is Base64 encoding?
Base64 is an encoding scheme that converts binary data into a string of 64 printable ASCII characters: A–Z, a–z, 0–9, + and /. It is defined in RFC 4648.
Base64 is not encryption — it is a reversible encoding. Anyone can decode a Base64 string instantly. Its purpose is to safely transmit binary data through text-only channels that can't handle raw bytes — like email (MIME), HTML attributes, or JSON payloads.
The encoded output is approximately 33% larger than the original input, because every 3 bytes of binary become 4 Base64 characters.
How to encode and decode Base64
- 1Select Encode or Decode
Choose Encode to convert plain text into a Base64 string. Choose Decode to convert a Base64 string back to plain text.
- 2Enter your input
Paste or type your text in the input field. The tool supports UTF-8 text including accented characters, emoji, and non-Latin scripts.
- 3Use Swap to chain operations
Click Swap to instantly flip the mode and move the output to the input. Useful when you want to encode, check the result, then decode it back.
- 4Copy the output
Click Copy to grab the result. Everything runs locally — your text never leaves the browser.
Common uses of Base64
⚠️ Base64 is not encryption
Never use Base64 to "hide" sensitive data. It provides zero security — anyone can decode it in seconds. For sensitive values, use proper encryption: AES-256 for symmetric encryption, or RSA/ECDSA for asymmetric. Base64 is purely a data transport encoding.
How Base64 encoding works
Base64 works by taking 3 bytes of binary input (24 bits) and splitting them into four 6-bit groups. Each 6-bit group maps to one of 64 characters in the Base64 alphabet. Because 3 input bytes produce 4 output characters, the encoded output is always exactly 33% larger than the original.
When the input length is not a multiple of 3, padding characters (=) are appended to make the output length a multiple of 4. One byte of remainder adds two characters plus ==; two bytes of remainder add three characters plus =.
This tool handles UTF-8 text correctly — multi-byte characters like accented letters, Chinese characters, or emoji are first encoded to their UTF-8 byte sequence, then Base64-encoded. This is the correct behavior for web applications and matches how btoa(unescape(encodeURIComponent(str))) works in JavaScript.
Base64 variants — Standard, URL-safe, and MIME
Not all Base64 is identical. Different contexts require different alphabets and line-break rules:
A–Z a–z 0–9 + /Padding: Yes (=)Default encoding. Used in MIME email, data URIs, and most general contexts.
A–Z a–z 0–9 - _Padding: No or optionalReplaces + with - and / with _ so the result is safe in URLs and filenames without percent-encoding. Used in JWT tokens and OAuth 2.0.
Same as standardPadding: Yes (=)Identical alphabet to standard, but inserts a CRLF line break every 76 characters. Required by email protocols (RFC 2045).
Base64 in web development — practical examples
These are the most common patterns you will encounter as a web developer:
// Encode "username:password" in Base64
const credentials = btoa('user:password');
fetch(url, { headers: { Authorization: `Basic ${credentials}` } });The Authorization header value is Base64-encoded — never encrypted. Use HTTPS to protect it in transit.
/* In your stylesheet */
.icon { background-image: url("data:image/png;base64,iVBORw0KGgo..."); }Good for icons under 5 KB. Above that, a separate file with HTTP caching is more efficient.
// JWT header.payload.signature — split on '.' and decode the middle part
const payload = JSON.parse(atob(token.split('.')[1]));
console.log(payload.sub, payload.exp);JWT uses URL-safe Base64 without padding. atob() handles standard Base64; add padding if needed.
Base64 in web development — data URIs and email
Base64 encoding appears in several specific contexts in web development. Understanding each one helps you use it correctly and avoid common mistakes:
Data URIs for inline assets. A data URI embeds file content directly in a URL string: data:image/png;base64,iVBORw0KGgo.... This lets you embed small images, fonts, or SVGs directly in CSS or HTML without an extra HTTP request. The tradeoff is file size: Base64 increases the asset size by ~33%, and data URIs cannot be cached separately by the browser. Use them only for very small assets (icons under 1 KB) where the saved HTTP request outweighs the size penalty.
Email attachments and MIME encoding. SMTP (email) was originally designed for ASCII-only text. To send binary files (images, PDFs, documents) over email, MIME encodes them as Base64 within a multipart message body. The Content-Transfer-Encoding: base64 header signals this encoding. Email libraries like Nodemailer, SendGrid, and Mailgun handle this automatically — you rarely need to encode attachments yourself.
HTTP Basic Authentication. The HTTP Authorization header for Basic Auth carries credentials as Base64: Authorization: Basic dXNlcjpwYXNzd29yZA==. This is the Base64 encoding of user:password. This provides no security beyond HTTPS — anyone can decode it. Always use Basic Auth over HTTPS only, and prefer token-based authentication for production APIs.
JSON Web Tokens (JWT) headers and payloads. Both the header and payload sections of a JWT are Base64url-encoded JSON objects (URL-safe Base64 without padding). This means the contents are readable by anyone — paste the token on jwt.io to decode it instantly. The security comes entirely from the signature section, not from the encoding. Never put sensitive data (passwords, SSNs, payment info) in a JWT payload.
Base64 encoding at the command line
Most operating systems include a built-in Base64 utility. These commands are useful for quick encoding in scripts, CI/CD pipelines, and server-side tasks:
Note: the -n flag in the echo command prevents a trailing newline from being included in the encoded output. Without it, the result will include the newline character and produce unexpected padding.
FAQ
Common questions
What is Base64?
Base64 is an encoding scheme that converts binary data into ASCII text using 64 printable characters (A–Z, a–z, 0–9, +, /). It's not encryption — it's a way to safely transmit binary data over text-only channels.
Why is Base64 used?
Base64 is used to embed binary data in text formats — for example, images in HTML/CSS data URIs, file attachments in email (MIME), tokens in JWTs, and API payloads that must remain text-safe.
Does Base64 make data secure?
No. Base64 is not encryption. Anyone can decode it instantly. Do not use Base64 to hide sensitive data — use proper encryption (AES, RSA) for that purpose.
Why does Base64 output end with "=="?
Base64 works in 3-byte chunks. If the input length isn't divisible by 3, padding characters (=) are added to complete the last chunk. One = means 1 padding byte, == means 2.
What is the size overhead of Base64?
Base64 encoded output is approximately 33% larger than the original input, because 3 bytes of binary become 4 ASCII characters.
What is Base64url and how does it differ from standard Base64?
Base64url replaces the two characters that are unsafe in URLs: + becomes - and / becomes _. Padding (=) is also typically omitted. This makes the output safe to use directly in URLs and HTTP headers without percent-encoding. JWT tokens use Base64url for both the header and payload sections.
What do btoa() and atob() do in JavaScript?
btoa() (binary to ASCII) encodes a string to Base64. atob() (ASCII to binary) decodes a Base64 string back to the original. Both are built into browsers and Node.js 16+. Limitation: btoa() only handles ASCII/Latin-1 characters — for UTF-8 strings with emojis or accents, use: btoa(encodeURIComponent(str)) to encode and decodeURIComponent(atob(encoded)) to decode.
Can I use Base64 to encode images for CSS?
Yes. A Base64-encoded image can be used as a CSS background: background-image: url("data:image/png;base64,iVBORw0KGgo..."). This eliminates an HTTP request, which is useful for tiny icons and loading spinners. However, Base64 images are ~33% larger than binary, cannot be cached separately, and increase CSS file size — only use this for images under 1 KB.
More in Developer Tools