Base64 Encoding and Decoding — A Complete Practical Guide
Base64 is one of those technical terms that shows up everywhere — in email attachments, image embeds, authentication headers, data URLs, and API responses — but rarely gets explained clearly. Most people know it encodes data somehow, but not why it exists, what problem it solves, or when to use it versus something else.
This guide explains Base64 from first principles, walks through every major real-world use case, and shows how to encode and decode data instantly without writing a single line of code.
Why Base64 Exists
The short answer is that not all systems can handle arbitrary binary data safely.
Binary data — the raw bytes that make up an image, a PDF, an audio file, or any other file — contains every possible byte value from 0 to 255. But many systems, particularly older ones, were designed to handle only printable ASCII text: the 95 or so characters that include letters, digits, and common punctuation. When you send binary data through one of these systems, some byte values get misinterpreted, modified, or stripped out entirely.
Email is the classic example. The original email protocol (SMTP) was designed to transport plain text. If you tried to send a raw binary file attachment through it, bytes with values above 127 (or certain control characters) would get corrupted in transit. The solution was to encode the binary data into a format made up entirely of safe printable characters — and that is exactly what Base64 does.
Base64 converts arbitrary binary data into a string that uses only 64 characters: the 26 uppercase letters (A–Z), 26 lowercase letters (a–z), 10 digits (0–9), plus + and /. These 64 characters are safe to pass through virtually any system designed to handle text.
How Base64 Encoding Works
The encoding process operates on three bytes at a time. Three bytes = 24 bits. Those 24 bits are split into four groups of six bits each. Each 6-bit group (which can represent a value from 0 to 63) is mapped to one of the 64 characters in the Base64 alphabet.
The result is that every three bytes of input produce exactly four characters of Base64 output. This means Base64-encoded data is always approximately 33% larger than the original — three bytes in, four characters out.
If the input length is not divisible by three, one or two = padding characters are added to the end to make the total output length a multiple of four. This is why Base64 strings often end with = or ==.
There is also a URL-safe variant of Base64 (sometimes called Base64URL) that replaces + with - and / with _, since the standard characters have special meanings in URLs. JWTs, for example, use Base64URL encoding for their header and payload sections.
Where Base64 Is Used in the Real World
Email Attachments
This is the original use case. When your email client sends a file attachment, it Base64-encodes the file and embeds the resulting text in the MIME message. The recipient's email client decodes it back to the original file. You never see this happening — it is entirely transparent — but it is why email attachments work reliably across every mail server ever built.
Data URLs in HTML and CSS
A data URL lets you embed file content directly in HTML or CSS instead of linking to a separate file. The format is:
data:[media type];base64,[encoded data]
For example, a small icon embedded directly in an HTML file might look like:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..." />
This is useful for very small images, inline SVGs, or fonts that you want to bundle into a single file with no external HTTP requests. The Image to Base64 tool on this site converts any image file into a ready-to-use data URL in one step.
API Authentication
HTTP Basic Authentication encodes credentials as Base64. When a request includes a Basic Auth header, it looks like:
Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=
The value after Basic is the Base64 encoding of username:password. Importantly, this is encoding, not encryption — anyone who intercepts the header can trivially decode it to read the credentials. Basic Auth should only be used over HTTPS, never plain HTTP.
JSON Web Tokens (JWTs)
As mentioned in our JWT guide, the header and payload sections of a JWT are Base64URL-encoded. This makes them compact enough to include in HTTP headers or URL parameters while still containing a full JSON object of claims.
Storing Binary Data in Text-Based Formats
XML and JSON can only contain text, not arbitrary binary data. When you need to include binary content in one of these formats — for example, embedding an image file in a JSON API response or a PDF attachment in an XML document — Base64 encoding is the standard solution.
Embedding Fonts and Icons in CSS
Web designers sometimes embed small icon fonts or custom fonts directly in a CSS file as Base64-encoded data URLs, eliminating the need for a separate font file request. This technique is common in CSS frameworks and design systems where reducing HTTP requests is a priority.
Cryptographic Operations
Many cryptographic operations produce raw binary output — hashes, signatures, encrypted ciphertext — that needs to be transmitted or stored as text. Base64 is the standard encoding for this. When you see an RSA public key, a TLS certificate, or an HMAC signature in a config file or an API response, it is almost certainly Base64-encoded.
Base64 vs Hex Encoding
Both Base64 and hexadecimal (hex) encoding convert binary data to text. Hex uses 16 characters (0–9 and a–f) and represents each byte as two characters. Base64 uses 64 characters and represents three bytes as four characters.
The practical difference is size. Hex encoding doubles the size of the data (one byte → two characters). Base64 increases the size by only about 33% (three bytes → four characters). For large amounts of binary data — file attachments, images, long keys — Base64 is significantly more compact.
Hex is easier to read by hand for debugging small values (you can directly read the byte values) and is the standard format for hash outputs, color codes in CSS, and memory addresses. Base64 is the better choice for encoding larger blobs of binary data efficiently.
How to Encode and Decode Base64 Without Writing Code
In the Browser
The Base64 Converter tool on this site handles both encoding and decoding. Paste any text or upload any file, choose whether you want to encode or decode, and the result appears instantly. For images, the tool also generates a ready-to-use data URL that you can paste directly into HTML or CSS.
All processing happens in your browser — nothing is sent to a server. This matters when you are working with credentials, private keys, or any sensitive content.
In JavaScript
// Encode
btoa('Hello, world!'); // → 'SGVsbG8sIHdvcmxkIQ=='
// Decode
atob('SGVsbG8sIHdvcmxkIQ=='); // → 'Hello, world!'
For binary data (files, images) rather than plain text strings, you need a more involved approach involving Uint8Array and FileReader, or the Buffer class in Node.js. The browser-based tool handles this automatically.
In Python
import base64
# Encode
encoded = base64.b64encode(b'Hello, world!')
print(encoded) # → b'SGVsbG8sIHdvcmxkIQ=='
# Decode
decoded = base64.b64decode('SGVsbG8sIHdvcmxkIQ==')
print(decoded) # → b'Hello, world!'
On the Command Line
# Encode
echo -n 'Hello, world!' | base64
# → SGVsbG8sIHdvcmxkIQ==
# Decode
echo 'SGVsbG8sIHdvcmxkIQ==' | base64 --decode
# → Hello, world!
Common Mistakes with Base64
Treating encoding as encryption — Base64 is not a security measure. It does not hide data from anyone. It is a way to represent binary data as text. Anyone can decode a Base64 string in seconds. Never use Base64 alone to "protect" sensitive data.
Forgetting the data URL prefix — If you are embedding an image in HTML, the Base64 string alone is not enough. You need the full data URL: data:image/png;base64, followed by the encoded string. Without the prefix, the browser will not know what type of data it is looking at.
Padding errors — Base64 strings must have a length that is a multiple of four. If you strip or truncate a Base64 string and try to decode it, you will get an error. Make sure the full string, including any trailing = characters, is intact.
Line breaks in long strings — Some Base64 implementations insert a line break every 76 characters (per the MIME standard). If you are using a Base64 string in HTML, CSS, or a JSON value, those line breaks will break things. Remove them before using the string in a context that does not expect them.
Confusing standard Base64 with Base64URL — The two variants use different characters for values 62 and 63 (+ and / in standard, - and _ in URL-safe). If you decode a JWT payload using a standard Base64 decoder without first converting the characters, you will get errors or wrong output. The Base64 Converter handles both variants.
Conclusion
Base64 is a fundamental building block of modern computing — present in email, authentication, APIs, cryptography, and web development. Understanding what it does (converts binary data to text-safe ASCII), why it exists (many systems cannot safely handle raw binary), and what it does not do (it is not encryption) will help you work with it correctly every time.
The next time you need to encode an image for a data URL, inspect the credentials in a Basic Auth header, or decode the payload of an API token, the Base64 Converter has you covered in one click.