Base64 Encoding Explained: When and Why to Use It

Base64 encoding is one of those tools every developer uses but few truly understand. It shows up in data URIs, API authentication headers, email attachments, and JWT tokens. Knowing when and why to use it, and equally when not to, will save you from common pitfalls.

How Base64 Works

Base64 converts binary data into a text-safe representation using 64 ASCII characters: A-Z, a-z, 0-9, +, and /, with = as padding. The algorithm takes three bytes of input (24 bits), splits them into four 6-bit groups, and maps each group to one of the 64 characters. Because three bytes become four characters, Base64 output is always roughly 33% larger than the original data.

A variant called base64url replaces + with - and / with _ so the output is safe for URLs and filenames. JWTs use this variant exclusively.

Common Use Cases

Data URIs — embed small images or fonts directly in HTML or CSS using data:image/png;base64,..., eliminating an extra HTTP request.
API authentication — HTTP Basic Auth encodes username:password as Base64 in the Authorization header.
Email attachments — MIME encoding uses Base64 to safely transmit binary files through text-only email protocols.
JSON payloads — when an API needs to accept binary data (images, PDFs) inside a JSON body, Base64 is the standard approach since JSON does not support raw bytes.
Cryptographic output — hashes, keys, and signatures are often displayed as Base64 for readability and safe transport.

When Not to Use Base64

Base64 is not encryption. It provides zero security since anyone can decode it instantly. Never use it to obscure sensitive data. It is also a poor choice for large files because the 33% size overhead adds up quickly. A 3 MB image becomes 4 MB after encoding, which increases bandwidth costs and slows page loads. For large assets, use proper binary transfer methods like multipart form uploads or cloud storage URLs.

Working with Base64 in JavaScript

Browsers provide btoa() and atob() for encoding and decoding strings. However, these functions only handle Latin-1 characters. For UTF-8 text, you need to encode to bytes first using TextEncoder before passing the result to Base64. In Node.js, Buffer.from(data).toString('base64') handles this natively without the Latin-1 limitation.

Encode and Decode Instantly

Whether you need to debug a JWT payload, encode an image for a data URI, or decode an API response, our Base64 tool handles it all in your browser with no server round-trip.

Open the Base64 Encoder/Decoder →