How to Base64 Encode Text and Files (and Get UTF-8 Right)
Base64 encoding turns arbitrary bytes into safe, portable text. This guide covers how encoding works, UTF-8 pitfalls, URL-safe output, and how to encode text or files without uploading anything.
Text-based systems - JSON payloads, URLs, HTTP headers, email bodies - were never designed to carry raw binary. The moment you try to stuff an image, a signed certificate, or even a string with unusual characters into one of those channels, something is liable to break or get silently corrupted. Base64 solves that by re-representing any sequence of bytes as a small, safe alphabet of letters, digits, and a couple of symbols.
This guide walks through what Base64 encoding actually does, why the output is bigger than the input, how UTF-8 text and emoji fit into the picture, and when to reach for the URL-safe variant instead of the standard one. Every example runs through the Base64 Encode tool, which encodes text and files entirely inside your browser tab.
What Base64 encoding actually does
Base64 is a way of representing binary data using only 64 printable ASCII characters: A-Z, a-z, 0-9, plus + and /, with = used for padding. The encoder groups the input into chunks of 3 bytes (24 bits), then splits those 24 bits into four 6-bit groups. Each 6-bit group maps to one of the 64 output characters, so 3 input bytes always become exactly 4 output characters.
That grouping is why Base64 is deterministic and reversible: given the encoded text, Base64 Decode can rebuild the exact original bytes. Nothing is guessed or approximated - it is a pure re-encoding of the same information in a different, text-safe alphabet.
Encoding a short string
Plain ASCII text encoded to standard Base64.
Input
Hello, World!Output
SGVsbG8sIFdvcmxkIQ==Why you would encode something as Base64
Base64 shows up anywhere binary data has to travel through a text-only pipe. A few of the most common reasons developers reach for it:
- Embedding assets inline - small images, icons, or fonts as
data:URLs directly inside HTML or CSS, avoiding an extra network request. - Carrying binary in JSON or XML - these formats have no native byte-string type, so binary fields are Base64-encoded strings.
- HTTP Basic Authorization - the
Authorization: Basic ...header value is theuser:passwordpair Base64 encoded, not encrypted. - MIME email attachments - email bodies are plain text, so attachments are Base64 encoded to survive transport.
- Storing binary in text-only systems - config files, environment variables, and some databases only accept text values.
It is worth being explicit about what Base64 is not: it provides no confidentiality and no compression. Anyone can decode it instantly with Base64 Decode - it is an encoding, not encryption, and the output is typically larger than the input, not smaller.
Output size and UTF-8 handling
Because every 3 input bytes become 4 output characters, Base64 output is about 33% larger than the input. That overhead is the price of guaranteeing every byte value survives transport through a text-only channel - it is a deliberate trade-off, not a bug.
A subtler issue is what counts as a "byte" when your input is text rather than pure binary. A naive btoa() call in JavaScript encodes each character's UTF-16 code unit directly and throws on anything outside Latin-1 - so accented letters, CJK text, and emoji all break it. The right approach is to convert the string to UTF-8 bytes first, then Base64-encode those bytes. Base64 Encode does this automatically with TextEncoder, so multi-byte characters and emoji round-trip correctly.
Encoding UTF-8 text
A string with an emoji, encoded as UTF-8 bytes before Base64.
Input
Café ☕ doneOutput
Q2Fmw6kg4pi1IGRvbmU=Nothing you encode is uploaded
Encoding is pure computation - the browser reads your text or file, converts it to bytes, and maps those bytes to characters. Base64 Encode does all of this locally with the File and TextEncoder APIs, so secrets, private keys, and customer files never leave your device.
Standard vs. URL-safe Base64
Standard Base64's +, /, and = characters all carry special meaning in URLs and filenames - + can mean a space, / is a path separator, and = marks a query parameter. Pasting standard Base64 straight into a URL without extra percent-encoding is a common source of broken links and mangled tokens.
URL-safe Base64 fixes this by substituting - for + and _ for /, and often dropping the trailing = padding entirely. The alphabet still maps to the same 64 values - only the two swapped characters differ - so it is exactly as compact, just safe to drop straight into a query string, path segment, or filename. Toggle this mode in Base64 Encode whenever the output is headed for a URL rather than a JSON field or header.
JWTs use URL-safe Base64
If you have ever inspected a token with JWT Decoder, you have seen URL-safe Base64 in the wild - the header and payload segments are Base64URL, not standard Base64, which is exactly why they contain - and _ instead of + and /.
Step-by-step: encode text or a file to Base64
- Open Base64 Encode and type or paste text into the input box, or drag a file onto the drop zone.
- Leave the standard alphabet selected for JSON, headers, or email use - or switch to URL-safe mode if the result is going into a URL, path, or filename.
- Watch the encoded output update instantly, along with the input's byte count and the encoded character count.
- Copy the raw Base64 string, or copy it pre-wrapped as a
data:URL if you are embedding an image or font directly in CSS or HTML.
There is no upload step and no processing delay to wait on - encoding happens as you type or as soon as a file is dropped, and it keeps working offline once the page has loaded.
Common use cases for Base64 encoding
- Turning a small icon or webfont into an inline
data:URL to cut an HTTP request. - Encoding a binary blob - a certificate, an image, a compressed file - so it fits inside a JSON field.
- Building the value for an HTTP
Authorization: Basicheader from a username and password. - Storing a binary secret or key material as a text value in an environment variable or config file.
- Preparing a file attachment for a MIME email body.
Common mistakes when encoding to Base64
Treating Base64 as encryption
Base64 is fully reversible with no secret key - anyone can run it through Base64 Decode in seconds. Never rely on it to protect passwords, tokens, or personal data; use real encryption for that and Base64 only for safe transport of the resulting ciphertext.
Using the standard alphabet in a URL
Dropping standard Base64 straight into a query string without escaping +, /, and = is a reliable way to get a broken or subtly altered link. Switch to the URL-safe variant before the value goes anywhere near a URL path or query parameter.
Encoding UTF-16 code units instead of UTF-8 bytes
A plain btoa() call encodes JavaScript's internal UTF-16 code units, which throws or silently corrupts anything beyond basic Latin characters. Convert text to UTF-8 bytes first - this is exactly what Base64 Encode does under the hood, so accented characters and emoji encode correctly the first time.
Best practices for encoding to Base64
- Choose the standard alphabet for JSON fields, headers, and email; choose URL-safe for anything landing in a URL, path, or filename.
- Remember the ~33% size increase when Base64-encoding large files for embedding - it is rarely worth it for anything beyond small icons or fonts.
- Pair encoding with Base64 Decode during development to confirm a value round-trips correctly before it ships.
- For anything sensitive - keys, tokens, private files - encode locally rather than pasting it into a service that uploads your data to a server.
Related tools
Decode Base64 back to readable text, including URL-safe input.
Percent-encode text for safe use in URLs and query strings.
Compute SHA-1, SHA-256, SHA-384, and SHA-512 hashes of text or files.
Decode a JWT to inspect its header, payload, and claims instantly.
Related guides
Base64 encoding turns bytes into safe text, and decoding undoes that step. This guide covers how decoding works, why URL-safe tokens need extra care, and how to recover the original text without uploading it anywhere.
Spaces, ampersands, and accented letters break URLs unless they are percent-encoded first. This guide covers how URL encoding works, when to use it, and how to avoid the mistakes that cause broken links.
Cryptographic hashes let you fingerprint text or files and verify they haven't changed. Here's how SHA-1, SHA-256, SHA-384, and SHA-512 work, and how to compute them without uploading anything.
A JWT looks like gibberish, but it is just three Base64URL segments hiding plain JSON. This guide walks through decoding a token, reading its claims, and avoiding the mistakes that cause auth bugs.