Base64 Encode & Decode
Encode text, images, or any file to Base64. Decode back. Auto-detect direction, URL-safe variant, data URI output for CSS embedding. Free, client-side, no upload.
What is Base64 encoding?
Base64 is a binary-to-text encoding scheme that converts binary data into a string of safe ASCII characters (A-Z, a-z, 0-9, plus the symbols + and /, with =padding). Base64 is the universal compatibility layer of the modern internet — it's how images are embedded in CSS (url(data:image/png;base64,...)), how JSON Web Tokens (JWTs) encode their header and payload, how HTTP Basic Auth transmits credentials, and how email MIME attachments cross transport that historically supported only 7-bit ASCII. This free tool encodes and decodes text, images, and arbitrary files entirely in your browser — nothing is uploaded.
How Base64 encoding works
- Input bytes are grouped into sets of 3 (24 bits total).
- Each 24-bit group is split into four 6-bit values.
- Each 6-bit value (0-63) maps to one of 64 ASCII characters: A-Z, a-z, 0-9,
+,/. - If input length isn't divisible by 3, padding
=characters are added (one or two). - Result is ~33% larger than the original — the price of fitting binary into text-only channels.
Common uses for Base64
| Use case | Example |
|---|---|
| Inline images in CSS | background: url(data:image/png;base64,iVBORw0KG...); |
| Inline images in HTML | <img src="data:image/svg+xml;base64,..." /> |
| HTTP Basic Auth | Authorization: Basic dXNlcjpwYXNz (user:pass) |
| JWT tokens | Header and payload are Base64URL-encoded JSON, dot-separated |
| Email attachments (MIME) | Files are Base64-encoded for transport over SMTP |
| API payloads | Binary blobs in JSON (e.g. file uploads via REST) |
| Database storage | Storing binary data in text-typed columns |
| URL parameters | Encoding binary data into URL-safe query strings |
Base64 vs Base64URL: what's the difference?
Standard Base64 uses + and / which have special meaning in URLs. Base64URL(RFC 4648 section 5) replaces them with - and _ respectively, and omits the= padding. JWTs use Base64URL specifically because tokens travel in URLs and HTTP headers. Toggle the "URL-safe" option above to switch between variants. When decoding, the tool accepts either variant automatically.
How to embed an image as a data URI
- Switch to the "File / Image" tab above.
- Drop your image (PNG, JPEG, SVG, WebP, etc.) — typically under 50KB for performance.
- Copy the "Data URI" output.
- Paste into CSS:
background: url(<DATA URI>)or HTML:<img src="<DATA URI>" />. - The image is now inlined — no separate HTTP request, no caching concerns, no broken image links.
Data URIs are best for small images where the network round-trip cost would exceed the size penalty of inlining. As a rule of thumb, inline images under 5-10KB; serve larger ones as separate files.
Frequently Asked Questions
Is Base64 encryption?
No. Base64 is encoding, not encryption. Anyone can decode a Base64 string in seconds — there's no key, no algorithm, no math. Never use Base64 to "hide" sensitive data like passwords or API keys. If you see cGFzc3dvcmQxMjM= in a config file, it's just password123with one trivial decode step. Use proper encryption (AES-256, libsodium) for secrets.
Why does Base64 make data ~33% larger?
Base64 encodes 3 input bytes (24 bits) into 4 ASCII characters (32 bits, since each char is 1 byte). That's 4/3 ≈ 1.33x size overhead. The tradeoff: you can safely transmit binary data through text-only channels (URLs, JSON, email) without escaping issues. For large files, native binary transports (raw HTTP POST body, S3 PutObject) are always preferable.
What are the = padding characters at the end?
Base64 encodes 3 bytes into 4 chars. If your input length isn't a multiple of 3, the last group is padded with = to keep the output length a multiple of 4. One trailing =means the input had length ≡ 2 mod 3; two trailing == means length ≡ 1 mod 3. Base64URL (URL-safe variant) typically omits the padding because the length can be inferred.
Why does my Base64-decoded text show garbled characters?
Almost always a UTF-8 issue. JavaScript's atob decodes Base64 to a binary string, not a UTF-8 string. This tool uses TextDecoder to properly decode UTF-8 bytes (so emoji and non-ASCII text round-trip correctly). Tools using decodeURIComponent(escape(atob(...)))are using a deprecated pattern that breaks on some inputs.
Can I encode a whole file or just text?
Both. Switch to the "File / Image" tab to drop any file (image, PDF, ZIP, etc.) and get both the raw Base64 and a ready-to-use data URI. For images, you also get a live preview to verify the encoded data is intact.
What's the maximum file size I can encode?
Browser-imposed limits: ~50-100MB realistically, since the entire file plus its Base64 representation must fit in memory at once. The DOM also limits what you can paste/render. For files over ~10MB, performance will lag and you're probably better off using a streaming encoder server-side (Node.js Buffer, Python base64.b64encode).
Is my data private?
Yes — 100%. All encoding and decoding happens in your browser. Files dropped here are read viaFileReader.readAsDataURL and never leave the page. The page network tab will confirm: no XHR/fetch requests are made when you encode.