What Is Base64 Encoding?
Base64 is a binary-to-text encoding scheme that represents binary data as a string of printable ASCII characters. It was originally designed to allow binary data to be transmitted over media that only support text, such as email (MIME) and XML documents. The name “Base64” comes from the fact that the encoding uses a set of 64 characters — the uppercase letters A–Z, the lowercase letters a–z, the digits 0–9, and two additional symbols: + and /. A padding character = is appended when the input length is not a multiple of three bytes.
Because every three bytes of binary input are mapped to four Base64 characters, the encoded output is roughly 33 % larger than the original data. Despite this overhead, Base64 remains one of the most widely used encoding formats in software engineering because it guarantees safe transport through text-only channels.
Common Use Cases for Base64
Data URIs in HTML and CSS
One of the most visible uses of Base64 on the web is the data: URI scheme. Instead of referencing an external image file, developers can embed the image directly into HTML or CSS using a Base64-encoded string. This eliminates an extra HTTP request, which can improve page load time for small assets like icons and SVGs. For example, a tiny PNG icon might appear in a stylesheet as background-image: url(data:image/png;base64,iVBOR...).
Email Attachments (MIME)
The SMTP protocol that delivers email was built for 7-bit ASCII text. To send binary attachments — images, PDFs, zip archives — email clients encode them with Base64 inside a MIME multipart message. The receiving client decodes the Base64 payload to reconstruct the original file. This is why you occasionally see raw Base64 blocks when viewing the source of an email message.
API Authentication (HTTP Basic Auth)
HTTP Basic Authentication encodes the username:password pair in Base64 and sends it in the Authorization header. While this does not provide encryption (Base64 is trivially reversible), it ensures that special characters in credentials do not break the HTTP header format. Always use Basic Auth over HTTPS to protect the credentials in transit.
JSON Web Tokens (JWT)
JWTs encode their header and payload segments as Base64URL strings (more on that below). Because JSON can contain characters that are unsafe in URLs, Base64URL encoding guarantees that the token can be passed in query strings and URL fragments without escaping issues.
Storing Binary Data in JSON or XML
JSON and XML are text-based formats with no native binary type. When an API needs to transmit a file, a cryptographic key, or a binary blob, Base64 encoding converts it into a safe string value that fits naturally inside a JSON field or an XML element.
How Base64 Encoding Works
The Base64 algorithm processes the input as a stream of bytes and converts every group of three bytes (24 bits) into four 6-bit values. Each 6-bit value is then mapped to one of the 64 characters in the Base64 alphabet. Here is a step-by-step overview:
- Read three bytes from the input (24 bits total).
- Split into four 6-bit groups. Each group has a decimal value between 0 and 63.
- Map each value to the corresponding character in the Base64 alphabet (A = 0, B = 1, …, / = 63).
- Handle padding. If the input length is not divisible by three, pad the remaining bits with zeros and append one or two
=characters to the output so the receiver knows the exact original length.
For example, the ASCII string Hi! (three bytes: 0x48 0x69 0x21) becomes SGkh in Base64. The string Hi (only two bytes) becomes SGk=, with one padding character.
Base64 vs Base64URL
Standard Base64 uses + and / as its 62nd and 63rd characters. These characters have special meaning in URLs and file names, which can cause problems in certain contexts. Base64URL (defined in RFC 4648 §5) replaces them with - (minus) and _ (underscore), and typically omits the trailing = padding. This variant is used in JWTs, URL-safe tokens, and anywhere an encoded value must be safely embedded in a URL.
When working with Base64 in your code, always be aware of which variant you need. Mixing the two can lead to subtle decoding errors that are hard to debug.
UTF-8 and Base64
Base64 encodes bytes, not characters. If your input text contains non-ASCII characters (e.g., Chinese, Japanese, emoji), you must first convert the text to a byte sequence using a character encoding such as UTF-8. In JavaScript, the native btoa() function only handles Latin-1 characters. To support the full Unicode range, use TextEncoder to convert the string to UTF-8 bytes before encoding, and TextDecoder after decoding. This tool handles that conversion automatically.
Frequently Asked Questions
Is Base64 encryption?
No. Base64 is an encoding, not encryption. It is trivially reversible and provides no security whatsoever. Never use Base64 to “hide” sensitive data. Use a proper encryption algorithm like AES or ChaCha20 for confidentiality.
Why is Base64 output larger than the input?
Because three bytes of input produce four bytes of output, the encoded result is always approximately 33 % larger. This is an inherent trade-off for converting binary data into a safe text representation.
Can I Base64-encode a file?
Yes. Any file — image, PDF, binary executable — can be Base64-encoded because Base64 operates on raw bytes. However, for large files the 33 % size increase can be significant. It is generally better to transmit large files as binary with a Content-Type header rather than Base64-encoding them.
What is the maximum length of a Base64 string?
There is no theoretical maximum in the Base64 specification itself. Practical limits depend on the context: URL length limits (roughly 2,000 characters in most browsers), HTTP header size limits, or database column sizes. For very large payloads, consider streaming or chunked transfer instead.
Is my data safe when using this tool?
Absolutely. This tool runs entirely in your browser using JavaScript. No data is sent to any server. You can verify this by opening your browser’s developer tools and inspecting the Network tab while using the tool — you will see zero outgoing requests containing your input.