If you've ever seen a string like SGVsbG8gV29ybGQ= and wondered what on earth it means,
you've encountered Base64 encoding. It's one of those technologies that's invisible until you need it —
and then suddenly it's everywhere. This guide explains what Base64 is, why it exists, and when you should use it.
What Is Base64?
Base64 is a binary-to-text encoding scheme. It converts binary data (images, files, audio) into a string
made up of 64 printable ASCII characters: A–Z, a–z, 0–9, plus + and /.
The equals sign = is used for padding at the end.
The key insight: Base64 doesn't encrypt anything. It's purely a representation change — from bytes to ASCII characters. Anyone can decode it. It's not compression either (it actually increases data size by ~33%). So why does it exist?
Why Base64 Was Created
In the early days of the internet, many systems were designed to handle text only. Email (SMTP), URLs, HTTP headers — none of them were guaranteed to safely transmit raw binary data. Base64 was invented as a safe way to embed binary files inside text-based protocols.
Think of it as a "safe passage" format. If you want to attach an image to an email, you can't just paste the raw bytes — many mail servers would strip or corrupt them. Encode the image as Base64 first, and now it's a safe string that travels through any text-based system.
Common Use Cases Today
Data URIs in HTML/CSS
The most common modern use case: embedding small images directly in CSS or HTML as Base64 strings.
Instead of loading an external <img src="icon.png">, you can write:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==">This eliminates an HTTP request for small images. Use it for icons, small logos, and any image under 2–4KB. Beyond that, the encoded string gets too large and defeats the purpose.
API Authentication
HTTP Basic Auth encodes credentials as Base64: username:password → Base64 → dXNlcm5hbWU6cGFzc3dvcmQ=.
When you see an Authorization: Basic dXNl... header, that's Base64 in action.
Important: HTTP Basic Auth over HTTPS is safe; over HTTP your credentials are trivially decodable. Always use HTTPS in production.
Embedding Images in JSON
When building webhook payloads, configuration files, or database fields that store file references, Base64 lets you embed small files directly without needing external storage or URLs.
🔤 Base64 Encoder & Decoder
Encode or decode Base64 instantly in your browser. No data sent to any server.
Open Base64 Encoder →When NOT to Use Base64
- Large files — The ~33% size overhead makes it terrible for anything but small assets. For large images, stick with proper file hosting and CDN URLs.
- Security-sensitive data — Base64 is not encryption. Never encode passwords, tokens, or API keys that need protection. Use proper encryption or hashing instead.
- Performance-critical paths — Encoding and decoding Base64 costs CPU. In hot code paths processing millions of small items, this adds up.
- URL-safe data — In URLs, use Base64URL (replace
+//with-/_) to avoid encoding issues. The standard Base64Encoder and Base64Decoder on TextFlow handle this.
How It Works (Briefly)
Each 3 bytes of input (24 bits) are split into four 6-bit groups. Each 6-bit group maps to one
of the 64 characters in the Base64 alphabet. If the input isn't a multiple of 3 bytes, padding
with = fills the gap.
Example: the string Hi is 2 bytes (16 bits). This gets padded to 24 bits with 8 zero bits,
producing four 6-bit groups: SGk=. You can verify this with the
Base64 Encoder.
Base64 is one of those tools that's simple in concept but essential in practice. Once you understand when to use it — and when not to — it becomes a reliable part of your developer toolkit.