Developer Tools
Base64 Encoding Explained — With Real Use Cases
Base64 encoding explained in plain English — what it is, why it makes data larger, and the real-world cases where developers actually use it.
- #base64
- #encoding
- #data uri
- #web development
Base64 encoding turns up everywhere in modern development — in data URIs, API tokens, email attachments and config files — yet it is widely misunderstood. The single most common mistake is treating it as a form of security. It is not. Base64 is a way to represent binary data as plain text, nothing more.
What Base64 actually is
Base64 is an encoding scheme. It takes arbitrary binary data — an image, a file, raw bytes — and rewrites it using only 64 safe characters: A–Z, a–z, 0–9, plus + and /, with = used as padding.
The reason this matters: many systems were built to handle text, not raw bytes. Email, URLs, JSON and HTML can all choke on certain byte values. Base64 sidesteps the problem by expressing any data in characters that every text system handles safely.
Encoding is not encryption
This deserves its own section because the confusion causes real security bugs.
Encoding transforms data into another format using a public, reversible scheme. Anyone can decode Base64 — no key, no password, no secret.
Encryption transforms data so that only someone with the key can reverse it.
Base64 is encoding. If you Base64-encode a password and store it, you have stored the password in plain text with an extra step. Never use Base64 to "hide" or "protect" anything sensitive.
Why Base64 makes data bigger
Base64 represents every 3 bytes of input as 4 characters of output. That is a roughly 33% size increase. A 90 KB image becomes about 120 KB once encoded.
This trade-off is the key to knowing when to use it: you accept a size penalty in exchange for being able to embed binary data anywhere text is allowed.
Real use case 1: data URIs
A data URI embeds a file directly inside HTML or CSS instead of linking to it:
background-image: url("data:image/png;base64,iVBORw0KGgoAAA...");
The browser decodes the Base64 and renders the image with no separate HTTP request. This is genuinely useful for tiny assets — icons, a 1×1 tracking pixel, a small logo — where saving a request outweighs the 33% size cost. For large images it is a poor trade: the page HTML balloons and the asset can no longer be cached separately.
Real use case 2: email attachments
Email's underlying protocol (MIME) is text-based. Every attachment you have ever sent — a PDF, a photo, a spreadsheet — was Base64-encoded so it could travel through a system designed for text. This is the original problem Base64 was built to solve, and it still runs quietly behind every email client.
Real use case 3: API tokens and credentials in transit
HTTP Basic Authentication sends username:password as a Base64 string in a header. JSON Web Tokens (JWTs) use Base64url — a URL-safe variant — for their header and payload segments. Crucially, neither protects the data; both rely on HTTPS to provide the actual security. Base64 here is purely about packaging the data into header-safe text.
Real use case 4: embedding binary in JSON or config
JSON has no binary type. When you need to put a small image, certificate or binary blob inside a JSON payload or a YAML config file, Base64 is the standard answer — it turns the bytes into a string the format can carry.
When not to use Base64
- Large files served over the web — link to them so the browser can cache and parallelise.
- Anything that needs to stay secret — use encryption.
- Storage where size matters — the 33% overhead adds up across millions of records.
Frequently asked questions
Is Base64 encryption? No. Base64 is encoding, not encryption. It is fully reversible by anyone with no key required. Never use it to protect sensitive data.
Why does Base64 make files larger? It encodes every 3 bytes as 4 text characters, adding roughly 33% to the size. That overhead is the cost of making binary data safe for text-based systems.
What is Base64url?
A URL-safe variant that replaces + and / with - and _ so the string can appear in URLs and filenames without escaping. JWTs use it.
When should I use a data URI? Only for very small assets like icons, where eliminating an HTTP request is worth the 33% size increase. Large images should stay as linked files.
Can Base64 be decoded without a key? Yes. Decoding requires no key or password — it is a public, standard transformation that any tool can reverse instantly.
Encode and decode Base64 instantly
Convert text or files to and from Base64 with the free Base64 Encoder — encode, decode and inspect data URIs right in your browser, with nothing uploaded to a server.
DEV-IN-ARTICLE · fluidWritten by
UtilityApps Team
We build free utility tools and write about the math, science, and trade-offs behind them. Got feedback or a tool request? Get in touch.
Related articles
More from the blogGet weekly tool recommendations
One short email each Friday: the tools that saved us time this week, plus a short tip you can use the next morning.
By subscribing you agree to our Privacy Policy. We never share your email and you can unsubscribe in one click. GDPR compliant.
DEV-BOTTOM · horizontal