Base64 Encoder / Decoder
What It Is
This tool encodes text or files to Base64 strings and decodes Base64 back to the original text, entirely in the browser. Developers use it to create data URIs for inline images in CSS/HTML, inspect JWT token payloads, encode binary files for API transmission, and debug authentication headers -- all without uploading data to any server.
How It Works
Base64 uses a 64-character alphabet (A-Z, a-z, 0-9, +, /) where each character represents 6 bits of data. The encoding processes input in 3-byte groups: 3 bytes (24 bits) are split into four 6-bit values, each mapped to an alphabet character. If the input length is not divisible by 3, one or two = padding characters are appended. For text encoding, this implementation uses TextEncoder to convert the string to UTF-8 bytes, then btoa() produces the Base64 output. File encoding reads the file as a data URL via FileReader.readAsDataURL(), splitting on the comma to extract the raw Base64 portion.
Worked Example
Input (encode): text "Hello, World!". Output: "SGVsbG8sIFdvcmxkIQ==". Step-by-step: The string is encoded to UTF-8 bytes (13 bytes). btoa("Hello, World!") maps the byte sequence through the Base64 lookup table. The trailing == indicates one padding byte was added (13 mod 3 = 1). Decoding atob("SGVsbG8sIFdvcmxkIQ==") returns the original string.
Common Mistakes
- Forgetting that Base64 is not encryption. Base64 is an encoding scheme, not encryption. Anyone can trivially decode a Base64 string back to the original -- never use it to protect sensitive data. Use proper encryption (AES, etc.) for confidentiality.
- Using standard Base64 in URLs. The
+and/characters in standard Base64 are interpreted as spaces and path separators in URLs. Use Base64URL (with-and_instead) for query parameters or URL segments. - Applying Base64 to UTF-16 strings without byte conversion. JavaScript strings are UTF-16. Passing a string directly to
btoa()with characters outside the Latin-1 range throws an error. Always convert to UTF-8 bytes first viaTextEncoderbefore encoding.
Frequently Asked Questions
Q:What is Base64 encoding used for?
Base64 encodes binary data into ASCII characters. It is commonly used for embedding images in CSS/HTML, transmitting binary files via HTTP, and encoding JWT tokens. The encoding increases data size by approximately 33%, making it inefficient for large files.
Q:Is my file data secure when encoding?
Yes. All encoding happens client-side in your browser. No files are uploaded to servers, and no data leaves your device. This makes it safe for encoding sensitive documents, private images, or confidential text.
Q:Can I encode any file type?
Most file types work: images (PNG, JPG), PDFs, text files, and more. The tool shows a preview for images and you can download the encoded output. All file sizes are supported with no limits.
Q:What is the difference between Base64 and Base64URL?
Standard Base64 uses <code>+</code> and <code>/</code> as the 63rd and 64th characters, which are not URL-safe. Base64URL replaces them with <code>-</code> and <code>_</code> respectively, and omits padding (<code>=</code>). JWT parts use Base64URL encoding.
Q:Why does Base64 increase the data size by about 33%?
Base64 maps every 3 bytes (24 bits) of input into 4 ASCII characters (6 bits each = 24 bits). For every 3 input bytes, you get 4 output characters. If input bytes are not divisible by 3, <code>=</code> padding is added. The overhead ratio is 4/3 = 1.33, hence ~33% larger.