Tag: Coding Tools

Base64 is everywhere: data URIs (data:image/png;base64,iVBOR…), email attachments (MIME), JWT tokens, SAML assertions, OAuth flows, the Authorization header in HTTP basic auth, embedded SVG icons in CSS, X.509 certificates wrapped in PEM. It’s not encryption — anyone can decode it — it’s a transport-safe encoding that lets binary data ride through systems that only accept ASCII text. Every developer needs to encode or decode Base64 several times a week, and most reach for an online tool because the language built-ins are awkward.

Our Base64 encoder/decoder handles text and binary files entirely in your browser — no upload, no server roundtrip. URL-safe variant supported. This guide explains what Base64 actually does, when each variant matters, the security non-confusion (Base64 is not encryption), and the workflows that drive most “base64 encoder online” searches.

What Base64 actually does

Base64 takes 3 bytes (24 bits) of input and represents them as 4 ASCII characters (each carrying 6 bits of information, drawn from a 64-character alphabet of A-Z, a-z, 0-9, plus + and /). The 64th character (technically the 65th — =) is padding when the input length isn’t a multiple of 3. The result is always 4/3 the size of the input — a 30 KB image becomes 40 KB of Base64 text.

• Standard Base64: uses A-Z a-z 0-9 + /. Output may include = padding. Right for email, MIME, most binary-in-text contexts.
• URL-safe Base64: replaces + with - and / with _. Right for tokens, query strings, filenames — anywhere + and / have other meanings.
• Base64 with padding stripped: some systems (JWT tokens, OAuth) strip the trailing = padding because it’s redundant when the length is known. The decoder needs to handle both padded and unpadded inputs.

Five common Base64 use cases

• Data URIs in CSS or HTML. Inline a small icon or font in your stylesheet to avoid an extra HTTP request: background: url("data:image/svg+xml;base64,PHN2…"). Best for assets under 4-8 KB.
• HTTP Basic Auth. The Authorization: Basic {base64(username:password)} header. Encoded, not encrypted — always pair with HTTPS.
• JWT token payloads. Each segment of a JWT is URL-safe Base64. Decoding reveals the header, claims, and signature without verifying authenticity.
• Email attachments (MIME). Email transports text only; Base64 encodes binary attachments for transport.
• Storing binary data in JSON. JSON has no native binary type. Base64 wraps the bytes as a string field.

How to use the browser Base64 tool

1. Open the Base64 encoder/decoder
2. Pick a mode: Encode (text/file → Base64) or Decode (Base64 → text/file)
3. For text: paste into the input area; the result appears live
4. For files: drop a file into the file panel — the encoded Base64 appears immediately, with a copy button
5. Toggle URL-safe variant if you need to embed the result in a URL or JWT-style context
6. Click Copy or Download. Decoded files download with their original or detected MIME type

All operations run in your browser via the standard btoa / atob primitives plus modern TextEncoder for Unicode handling.

Base64 in code — every common language

// JavaScript (browser)
btoa("Hello, world!");                    // "SGVsbG8sIHdvcmxkIQ=="
atob("SGVsbG8sIHdvcmxkIQ==");             // "Hello, world!"

// JavaScript (Node) — Buffer is the standard
Buffer.from("Hello, world!").toString("base64");
Buffer.from("SGVsbG8sIHdvcmxkIQ==", "base64").toString();

// Python
import base64
base64.b64encode(b"Hello, world!").decode()      # "SGVsbG8sIHdvcmxkIQ=="
base64.b64decode("SGVsbG8sIHdvcmxkIQ==").decode()

# URL-safe variant
base64.urlsafe_b64encode(b"data?with/special").decode()

// Bash
echo -n "Hello, world!" | base64                  # SGVsbG8sIHdvcmxkIQ==
echo "SGVsbG8sIHdvcmxkIQ==" | base64 -d           # Hello, world!

// Go
import "encoding/base64"
base64.StdEncoding.EncodeToString([]byte("Hello"))
base64.URLEncoding.EncodeToString([]byte("Hello"))

Common Base64 mistakes

• Confusing Base64 with encryption. Base64 is reversible by anyone — it’s not security. Sensitive data in Base64 is sensitive data in plaintext. Use TLS, encryption (AES, RSA), and hashing (SHA-256) for actual security.
• Mixing standard and URL-safe variants. A token encoded URL-safe (-_) won’t decode with a standard decoder (expecting +/). Both your encoder and decoder must use the same variant.
• Forgetting Unicode encoding. JavaScript’s btoa only handles Latin-1 characters by default. For Unicode strings, encode to UTF-8 first: btoa(unescape(encodeURIComponent(str))) or use TextEncoder.
• Inlining huge images as data URIs. A 500 KB image becomes 670 KB of Base64 — bloats your HTML/CSS, slows initial render. Use data URIs only for assets under ~8 KB.
• Padding handling. Some systems strip the trailing = from Base64 (notably JWT). Decoders must handle both forms or pad inputs to a multiple of 4 before decoding.

When NOT to use Base64

• For storing passwords or secrets. Use proper hashing (Argon2id, bcrypt) for passwords. Base64 of a password protects nothing.
• For very large files. Base64 inflates size by 33%. Send binary data via multipart/form-data or direct binary uploads instead.
• For data already URL-safe. If your text is already ASCII without special characters, Base64 just bloats it. Plain text passes through URL params fine after URL-encoding.
• As a checksum. Base64 doesn’t detect corruption. Use SHA-256 for integrity verification.

Frequently asked questions

Is Base64 encryption?

No. Base64 is encoding, not encryption. Anyone can decode Base64 instantly without a key. It’s the wrong tool for keeping data secret. Use real encryption (AES-GCM, RSA, libsodium) for confidentiality.

What’s the difference between Base64 and URL-safe Base64?

Standard Base64 uses + and / in its alphabet. These have special meanings in URLs and filenames, so URL-safe Base64 substitutes - for + and _ for /. JWT tokens, OAuth, and most modern API tokens use the URL-safe variant.

Why does Base64 add 33% size?

Three input bytes (24 bits) become four output characters, each storing 6 bits — a 4:3 ratio. The math is fundamental to representing 8-bit data in a 6-bit-per-character alphabet, plus padding. Total inflation is exactly 4/3 of the input.

Can I encode a file with the browser tool?

Yes — drop any file into the file panel. The browser reads it via the FileReader API, encodes locally, and shows the Base64 with a copy button. No upload. Works for files up to roughly 100 MB before browser memory becomes the bottleneck.

What’s the maximum size for a data URI in CSS?

Practically ~8 KB for a single asset. Beyond that, the bloat to your CSS/HTML outweighs the saved HTTP request. For larger assets, serve as a regular file and let HTTP/2 multiplex the request — modern browsers handle parallel asset loading efficiently.

Is my data uploaded when I use the tool?

No. The tool uses browser-native btoa/atob and FileReader API for files. All processing is local. Verify in DevTools Network tab — there are no requests when you encode or decode.

Related tools and guides

• Base64 Encoder/Decoder
• URL Encoder/Decoder
• HTML Encoder/Decoder
• JWT Encoder/Decoder
• Image to Base64 Converter
• All coding tools