Base64 Encoder / Decoder

**How to Use the Base64 Encoder / Decoder** Base64 is one of the most fundamental encoding schemes in computing. It converts binary data — images, files, cryptographic keys, binary protocols — into plain ASCII text that can travel safely through text-only systems like email, JSON APIs, and HTML. Our Base64 tool handles both encoding and decoding instantly in your browser, with support for standard Base64, URL-safe Base64, and byte-count tracking. **Step 1 — Enter Your Text or Data** Paste the text you want to encode, or paste a Base64 string you want to decode, into the input field. The tool accepts plain text, JSON strings, XML, HTML, or any UTF-8 content. For encoding binary data (images, PDFs), use the file upload option which converts the binary content to Base64 automatically. **Step 2 — Choose Encode or Decode** - **Encode:** Converts your plain text or binary data into a Base64 string. The output only contains characters A-Z, a-z, 0-9, +, /, and = (padding). - **Decode:** Converts a Base64 string back into the original text or data. **Step 3 — Choose Standard or URL-Safe Base64** - **Standard Base64** (RFC 4648 Section 4): Uses + and / characters. Fine for most uses but breaks when embedded in URLs since + means space and / separates URL paths. - **URL-Safe Base64** (RFC 4648 Section 5): Replaces + with - and / with _. Used in JWTs (JSON Web Tokens), OAuth tokens, and any context where the encoded string appears in a URL or filename. **Step 4 — Copy and Use the Result** Click the copy button to copy the encoded or decoded result to your clipboard. The tool also shows the byte count before and after encoding. Base64 encoding increases data size by approximately 33% — a 100-byte string becomes about 136 Base64 characters. **What Base64 Is Used For — Real Examples** *Embedding images in HTML and CSS:* Instead of linking to an external image file, you can embed a small icon directly in your HTML as a Base64 data URL: img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...' — no HTTP request needed, the image is baked into the HTML. This technique is used for critical above-the-fold images to eliminate render-blocking HTTP requests and improve Core Web Vitals scores. *JSON Web Tokens (JWTs):* JWTs consist of three URL-safe Base64-encoded segments separated by dots: header.payload.signature. When your React app calls a protected API, it sends the JWT in the Authorization header: Authorization: Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1c2VyMTIzIn0.SIG. You can decode the middle segment in our tool to read the payload — it contains user ID, role, expiration timestamp, and any custom claims. Never decode the signature — it's a hash, not readable data. *Email attachments (MIME encoding):* Email systems like SMTP were designed for 7-bit ASCII text. Attachments (PDFs, images, Word documents) are binary — they cannot travel as-is through SMTP. MIME (Multipurpose Internet Mail Extensions) encodes attachments as Base64 before transmission and the email client decodes them on the receiving end. Every email attachment you've ever sent has been Base64-encoded in transit. *Storing binary data in JSON:* JSON has no binary type. When an API needs to return an image thumbnail, an audio clip preview, or a cryptographic key inside a JSON response, it Base64-encodes the binary data and puts the string in a JSON field: thumbnail: "iVBORw0KGgoAAAANSUhEUg..." The client decodes it back to binary. *API authentication:* HTTP Basic Authentication encodes credentials as Base64: base64(username:password). For example, user admin with password secret123 becomes Authorization: Basic YWRtaW46c2VjcmV0MTIz. Important: this is encoding, not encryption. Anyone who intercepts the header can decode it instantly. Always use HTTPS for Basic Auth. **Base64 Encoding Size Overhead** | Original Size | Base64 Size | Overhead | |---|---|---| | 100 bytes | 136 chars | +36% | | 1 KB | 1.37 KB | +37% | | 100 KB | 137 KB | +37% | | 1 MB image | 1.37 MB | +37% | This overhead is why Base64 is used for small assets (icons, thumbnails, keys) embedded in HTML/CSS, not for large files. A 5 MB product image Base64-encoded into your HTML would add 6.85 MB to your page — catastrophic for performance. **Common Mistakes** 1. **Confusing encoding with encryption.** Base64 is not a security measure. Anyone can decode a Base64 string in seconds. Never use it to hide passwords, API keys, or sensitive data. It is purely a format transformation for compatibility, not confidentiality. 2. **Using standard Base64 in URLs.** Standard Base64 uses + and / which are reserved characters in URLs. Embedding a standard Base64 string in a URL query parameter without re-encoding breaks the URL parser. Always use URL-safe Base64 (- and _) for tokens in URLs. 3. **Forgetting padding.** Base64 strings must be a multiple of 4 characters. Missing = padding characters cause decode errors in strict parsers. Some systems (JWTs) omit padding intentionally; others require it. Our decoder handles both. 4. **Encoding already-encoded data.** Double-encoding (Base64 encoding a Base64 string) is a common mistake when piping data through multiple systems. The result is valid Base64 but decodes to more Base64 instead of original data. 5. **Using Base64 for large file transfers.** The 37% size overhead plus the CPU cost of encoding/decoding makes Base64 a bad choice for files over a few KB sent over a network. Use multipart/form-data for file uploads instead. **Pro Tips** - **Decode JWTs without a library:** Paste the middle segment (between the two dots) of any JWT into the decoder to instantly read the payload — user ID, expiration, roles, and custom claims — without writing a single line of code. - **Debug API responses:** When an API returns a Base64 field and you want to know what it contains, paste it into the decoder. Could be JSON, XML, a certificate, or a small image. - **Generate Basic Auth headers:** Encode username:password (with the colon) to generate an HTTP Basic Auth header value. Paste into the Authorization header as 'Basic [encoded]'. - **Check certificate thumbprints:** TLS certificates are often shared as PEM format (Base64-encoded DER). Decode the content between -----BEGIN CERTIFICATE----- and -----END CERTIFICATE----- to inspect the raw binary. - **100% private:** This tool uses the browser's built-in btoa() and atob() functions for standard Base64, with TextEncoder/TextDecoder for proper UTF-8 handling. No data leaves your browser. **Technical Background** Base64 was defined in RFC 2045 (1996, for MIME email) and standardized in RFC 4648 (2006). It works by grouping input bytes into 3-byte chunks (24 bits) and mapping each 6-bit group to one of 64 ASCII characters (A-Z, a-z, 0-9, +, /). If the input is not divisible by 3, = padding is added. The name '64' comes from the 64-character alphabet used. Modern JavaScript provides btoa() (binary to ASCII, i.e., encode) and atob() (ASCII to binary, i.e., decode) for Base64 operations. For Unicode text, btoa() requires converting to UTF-8 bytes first via TextEncoder — which our tool does automatically, avoiding the common 'InvalidCharacterError' that naive implementations produce on emoji or non-ASCII characters. **Data Sources** RFC 4648: The Base16, Base32, and Base64 Data Encodings (IETF, 2006). RFC 7519: JSON Web Token (JWT) standard. RFC 2045: MIME Part One — Format of Internet Message Bodies. MDN Web Docs: btoa() and atob() browser API documentation.