Base64 encoding is something every developer encounters, yet many never fully understand what it does or why it exists. This guide breaks it down in plain terms with practical examples.
What Is Base64?
Base64 is an encoding scheme that converts binary data into a text format using 64 printable ASCII characters. It takes any kind of data — images, files, binary content — and represents it as a string of letters, numbers, and a couple of symbols (+, /, =).
The name comes from the 64 characters it uses:
A-Z(26 characters)a-z(26 characters)0-9(10 characters)+and/(2 characters)=for padding
How Does It Work?
Base64 takes every 3 bytes (24 bits) of input and splits them into 4 groups of 6 bits each. Each 6-bit group maps to one of the 64 characters. This means Base64-encoded data is always about 33% larger than the original.
For example, the text Hi becomes SGk= in Base64.
When Should You Use Base64?
1. Embedding Images in HTML or CSS
Instead of linking to an external image file, you can embed small images directly in your code:
<img src="data:image/png;base64,iVBORw0KGgo..." />
This reduces HTTP requests but increases file size. Use it for small icons and UI elements, not large photographs.
2. API Authentication
HTTP Basic Authentication encodes credentials in Base64:
Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=
Important: Base64 is encoding, not encryption. Anyone can decode it. Always use it over HTTPS.
3. Email Attachments
The MIME standard uses Base64 to encode email attachments so binary files can travel through text-based email protocols safely.
4. Data URIs
Base64 lets you embed fonts, small SVGs, and other assets directly in CSS files:
@font-face {
src: url(data:font/woff2;base64,d09GMgAB...) format("woff2");
}
5. Storing Binary Data in JSON
JSON does not support binary data natively. Base64 lets you include file content in JSON payloads:
{
"filename": "document.pdf",
"content": "JVBERi0xLjQK..."
}
When NOT to Use Base64
- Large files — The 33% size increase adds up quickly
- As a security measure — Base64 is not encryption; it provides zero security
- When direct file references work — Linking to files is more cache-friendly
- Frequently changing content — Every change invalidates the entire encoded string
Base64 Variants
You may encounter different Base64 flavors:
- Standard Base64 — Uses
+and/, with=padding - URL-safe Base64 — Replaces
+with-and/with_to avoid URL encoding issues - Base64 without padding — Omits the
=characters at the end
Common Base64 Operations
In JavaScript:
// Encode
btoa("Hello World"); // "SGVsbG8gV29ybGQ="
// Decode
atob("SGVsbG8gV29ybGQ="); // "Hello World"
In Python:
import base64
base64.b64encode(b"Hello World") # b"SGVsbG8gV29ybGQ="
Try It Yourself
Need to quickly encode or decode Base64 strings? Our Base64 Encoder & Decoder handles text and file encoding instantly in your browser with no data sent to any server.
Understanding Base64 removes much of the mystery from web development tasks involving data transfer, authentication headers, and embedded assets.