What is Base64 encoding?

Base64 is a binary-to-text encoding that represents binary data as ASCII string using 64 characters (A-Z, a-z, 0-9, +, /) with = padding. It encodes every 3 bytes into 4 characters, increasing size by ~33%. Used for data URIs, email MIME, and embedding binary in JSON/XML.

How to decode Base64 to text?

Paste Base64 string into Input, click Decode. The tool runs decodeURIComponent(escape(atob(text))) to restore UTF-8. If Base64 is invalid (wrong padding or characters), it shows Invalid Base64 error.

Is Base64 encryption?

No. Base64 is encoding, not encryption. Anyone can decode it instantly. Do not use for passwords or secrets — use real encryption like AES or bcrypt for security.

Why is my decoded text showing � or error?

You likely encoded without UTF-8 handling or decoded non-Base64 text. Always use unescape(encodeURIComponent) before btoa and decodeURIComponent(escape(atob)) after. Also ensure padding = is intact and no URL-safe variant (-_ instead of +/).

Is this Base64 encoder free and private?

Yes, 100% free, client-side, no signup, no server upload. Uses native btoa/atob in browser. Text never leaves your device, safe for tokens and private data.

Base64 Encoder & Decoder - Encode Decode Base64 Online Free

📥 Input Text

Chars: 0 • Lines: 0 • Size: 0 B

UTF-8 • btoa(unescape(encodeURIComponent)) • atob → decodeURIComponent

📤 Output Base64

Chars: 0 • Lines: 0 • Size: 0 B • Diff: 0

What is Base64? Base64 Encoder & Decoder Explained

A Base64 encoder converts arbitrary text or binary data into a safe ASCII string using only 64 characters: A-Z, a-z, 0-9, +, / with = for padding. A base64 decoder reverses that string back to original text. This base64 encode online tool and base64 decode companion exist because many systems handle only text — email (MIME), URLs, JSON, XML, HTML data URIs — yet you need to send images, files, or Unicode through them.

How Base64 works: it splits input bytes into 6-bit chunks. Every 3 bytes (24 bits) become 4 Base64 characters (4×6 bits). If input length is not divisible by 3, = padding is added (one = if 2 bytes remain, == if 1 byte). The result is ~33% larger than input — that is the cost of making binary “text-safe.” Example: Hello (5 bytes) → SGVsbG8= (8 chars). Our implementation uses btoa(unescape(encodeURIComponent(text))) to encode and decodeURIComponent(escape(atob(text))) to decode — the classic UTF-8 safe pattern that handles emoji, accents, and non-Latin scripts without corrupting them, unlike raw btoa which throws on characters outside Latin1.

Search terms base64 encoder, base64 decoder, base64 encode online, base64 decode, encode base64, decode base64 online, text to base64, base64 to text all lead here. At html-compiler.com we target them all with one fast, private page — no server, pure browser atob/btoa — your data never leaves your device.

Why Encode to Base64? Key Benefits & History

Base64 was standardized for email in the early 1990s (MIME RFC 2045) to send attachments through 7-bit SMTP that stripped binary. Today the need persists wherever binary must survive text-only pipes. Major benefits:

Benefit	How Base64 Helps	Who Uses It
📎 Safe Transport	Transforms bytes to ASCII that survives email, JSON, XML, CSV without corruption or truncation	Backend devs, email systems
🖼️ Inline Embedding	Embed images, fonts, icons as `data:image/png;base64,...` directly in HTML/CSS with zero HTTP request	Frontend devs, email template designers
🔗 API Compatibility	Send binary blobs inside JSON `{"file":"SGVsbG8="}` or XML where raw bytes would break parsing	REST/GraphQL, Firebase, OpenAI
🔐 Not Encryption but Obfuscation	Quick reversible obfuscation for config snippets, basic-auth `username:password` header	DevOps, QA masking secrets in demos
🧩 Debugging	Human-readable ASCII snapshot of binary payloads; compare via Diff stats	QA, support teams
📦 Data URI Performance	Small SVGs/icons inlined save round-trips; optimal under ~2-4KB	Performance engineers

Important: Base64 is encoding, not encryption. Anyone can base64 decode instantly — never treat it as security. For secrets use AES/GCM, bcrypt, or TLS. Use base64 only for transport safety.

Base64 Alphabet & Padding Reference

Value	Char	Value	Char	Value	Char	Value	Char
0	A	16	Q	32	g	48	w
1	B	17	R	33	h	49	x
2	C	18	S	34	i	50	y
3	D	19	T	35	j	51	z
4	E	20	U	36	k	52	0
5	F	21	V	37	l	53	1
6	G	22	W	38	m	54	2
7	H	23	X	39	n	55	3
8	I	24	Y	40	o	56	4
9	J	25	Z	41	p	57	5
10	K	26	a	42	q	58	6
11	L	27	b	43	r	59	7
12	M	28	c	44	s	60	8
13	N	29	d	45	t	61	9
14	O	30	e	46	u	62	+
15	P	31	f	47	v	63	/
Padding: `=` (one or two at end if input bytes % 3 ≠ 0) • URL-safe variant uses `-` instead of `+` and `_` instead of `/`

Common Use Cases for Base64 Encode Online

Images & Data URI: Convert logo.png → Base64, then use <img src="data:image/png;base64,iVBORw0KGgo..."> or background: url(data:image/svg+xml;base64,PHN2...). Eliminates extra request, ideal for icons <4KB, email HTML, offline bundles. Decode to verify before deploying. This targets image to base64, base64 image encoder.
Email (MIME): SMTP is 7-bit; attachments are base64-encoded with Content-Transfer-Encoding: base64. Our base64 encoder lets you manually prepare MIME parts for testing with Node nodemailer or Python email.
Data in JSON/XML/APIs: JSON cannot carry raw bytes — encode file bytes to Base64 string for POST /upload with {"data":"SGVsbG8="}. Firebase, Stripe attachments, OpenAI vision inputs use similar patterns.
Basic Authentication: HTTP Basic Auth sends Authorization: Basic <base64(username:password)>. Use Encode on admin:secret123 → YWRtaW46c2VjcmV0MTIz for header testing in curl/Postman, then Decode to audit logs.
Embedding Fonts & Media: Inline woff2 fonts as Base64 in CSS @font-face { src: url(data:font/woff2;base64,d09GR...) — avoids CORS and FOIT on first paint.
Canvas & Web APIs: canvas.toDataURL() returns data:image/png;base64,... — copy the Base64 tail into our decoder to inspect or process. Similarly for FileReader.readAsDataURL.
Obfuscation for Demos: Quickly hide a config snippet or license key in docs/slides as Base64 — remember it is reversible, so only for non-sensitive masking.

Size rule of thumb: encoded size = ceil(n / 3) * 4 (≈ n×1.33). A 3KB SVG becomes ~4KB Base64. Use our live Diff counter to decide if inlining is worth the overhead versus HTTP/2 multiplexed fetch.

Features of html-compiler.com Base64 Encoder & Decoder (Free, Fast, Private)

Inspired by htmlbeautifier.org/css’s beloved light card design but tailored for encoding, this base64 encoder / base64 decoder packs everything in one page:

Triple Input — Paste, Upload, URL: Click Paste to read clipboard via navigator.clipboard.readText(), Upload to load any text file via FileReader readAsText (we handle file as text for Base64 as specified), or paste a public URL and click URL to fetch via fetch() — all client-side, no upload to server.
One-Click Encode & Decode: Encode via btoa(unescape(encodeURIComponent(text))) for full UTF-8 support (emoji, Chinese, Arabic safe). Decode via decodeURIComponent(escape(atob(text.trim()))) inside try/catch — invalid Base64 shows Invalid Base64 — check padding and characters instead of crashing.
Live Stats & Diff: Input card shows Chars / Lines / Size (bytes via Blob → B/KB/MB); Output adds Diff = outputChars − inputChars with green (+) for expansion or red (−) for shrink, so you see the 33% growth instantly.
Copy, Download, Fullscreen: Copy via async Clipboard API with execCommand fallback, Download as base64-encoded.txt or base64-decoded.txt (Blob + object URL), Full Screen via Fullscreen API on output card for long payloads.
Large Monospace Editor: 280px tall textarea with ui-monospace, line-height 1.65, tab-size 2, white-space:pre and word-break:break-word, light #fbfdff background turning white on focus — comfortable for 10KB tokens or 1,000-line data URIs.
Orange Primary Actions: Centered Encode (orange #f97316, shadow 0 4px 12px rgba(249,115,22,.25)) and Decode (dark #0f172a) mirror htmlbeautifier.org’s high-contrast call-to-action with hover and active press feedback.
Error Resilient: Empty input → friendly “paste text first” message; decode on non-Base64 → caught DOMException InvalidCharacterError and shown in red; binary file read as text per spec — for true binary images use upload then encode, size shown correctly.
100% Client-Side & Lightweight: No backend, no cookies, no signup. Under 12KB local JS, no external encoding library needed — native btoa/atob only. Works offline after first load, even on 3G lab networks.

How to Use Base64 Encoder & Decoder — Step-by-Step Guide

Method 1: Paste Text (Fastest for base64 encode online)

Copy any text — Hello World!, JSON snippet, SVG markup, or username:password — click 📋 Paste (grants clipboard permission) or press Ctrl+V into 📥 Input Text. Stats (Chars/Lines/Size) update live. Click 🔒 Encode to get Base64 in 📤 Output Base64, or if Input already holds Base64 like SGVsbG8gV29ybGQh, click 🔓 Decode to restore original. Use Copy or Download.

Method 2: Upload File (Handle file as text for Base64)

Click 📁 Upload → select notes.txt, data.json, template.html, or even .csv from your PC. We use FileReader readAsText to load content as UTF-8 text into Input (spec-compliant: handle file as text for base64). No file ever touches our server — privacy preserved. Supports files up to ~5MB (browser limit). Then hit Encode to get Base64 of file contents, or if file itself is Base64-encoded, hit Decode.

Method 3: Load from URL

Paste a public URL like https://raw.githubusercontent.com/user/repo/main/README.md or https://example.com/data.txt into URL field and click 🔗 URL. We fetch via fetch(url, {mode:'cors'}) and populate Input. If CORS blocks (common on non-CORS hosts), we show actionable message: “Fetch failed (CORS blocked?) — download file & use Upload instead.” For CORS-enabled raw GitHub or CDN, it works instantly.

After Encode / Decode

Review Output stats — typically +33% chars after encode (e.g., 100 chars → ~136 Base64 chars) and −25% after decode. Use ⛶ Full Screen to review long data URIs, 📋 Copy (navigator.clipboard.writeText) to paste into VS Code, Postman, or <img src="data:...;base64,">, or ⬇ Download to save as base64-encoded.txt (after encode) or base64-decoded.txt (after decode). Download uses correct MIME text/plain;charset=utf-8.

Pro tip: Use Ctrl + Enter to Encode, Ctrl + Shift + D to Decode without touching mouse.

Encode vs Decode — Comparison Table

Tool	Input	Method	Output	Size Change	When to Use
Base64 Encode	Plain text / UTF-8 string	`btoa(unescape(encodeURIComponent(text)))`	A-Za-z0-9+/ with = padding	~+33% larger	Embedding, email, API transport, auth header
Base64 Decode	Base64 string (A-Za-z0-9+/=)	`decodeURIComponent(escape(atob(text)))` in try/catch	Original UTF-8 text	~−25% smaller	Inspecting data URIs, attachments, logs, tokens
Base64URL Variant	Same as encode but `+→-`, `/→_`, no padding	Replace chars + strip =	URL-safe string	−0-2 chars	JWT, URLs, filenames — not needed for standard encode

Our single page serves both base64 encoder and base64 decoder intents — no separate URLs, no extra clicks.

Before vs After Example — Base64 Encode Online in Action

Before (Encode Input — 19 chars)	After Encode (Output — 28 chars)	After Decode (Round-trip — 19 chars)
Hello, Base64! 🚀	SGVsbG8sIEJhc2U2NCEg8J+agA==	Hello, Base64! 🚀

// Encode UTF-8 safely
const b64 = btoa(unescape(encodeURIComponent("Hello, Base64! 🚀")));
// → "SGVsbG8sIEJhc2U2NCEg8J+agA=="

// Decode with error handling
try {
  const text = decodeURIComponent(escape(atob(b64)));
  // → "Hello, Base64! 🚀"
} catch(e) {
  console.error("Invalid Base64", e.message);
}

Try data URI: encode <svg><circle r="10"/></svg> → Base64, then use data:image/svg+xml;base64,PHN2Zz48Y2lyY2xlIHI9IjEwIi8+PC9zdmc+ directly in <img src="">.

Pro Tips, Pitfalls & Browser Compatibility

Expert Tips to Get Clean Base64 Every Time

Always UTF-8 wrap: Raw btoa("✓") throws InvalidCharacterError because ✓ is outside Latin1 (0-255). Wrap with encodeURIComponent → unescape as we do — this handles all Unicode, including emoji. Same for decode with escape → decodeURIComponent.
Preserve padding: Do not strip = or == before decode — atob requires valid length % 4 == 0. If you receive Base64URL (-_), replace -→+, _→/ and pad to multiple of 4 before calling our Decode.
Line breaks: MIME inserts \r\n every 76 chars. Our decoder calls text.trim() and atob tolerates whitespace? Modern browsers ignore line breaks in atob but we also advise to remove newlines via code.replace(/\s+/g,'') if pasting from email.
Validate before decode: Check /^[A-Za-z0-9+/]*={0,2}$/ and length % 4 === 0. Our try/catch does this for you and shows red error instead of blank.
Large files: For >1MB text, Encode may be ~1.33MB output — use Download rather than Copy (clipboard lags). For true binary images >5MB, consider not inlining — serve as file and link instead; Diff helps decide.
Security reminder: Base64 is not encryption — Base64("password123") → "cGFzc3dvcmQxMjM=" is trivially reversible. For secrets use AES-256-GCM or bcrypt, and never commit Base64 “encoded secrets” to git as protection.
URL-safe variant: JWT uses Base64URL. If decode fails, try input.replace(/-/g,'+').replace(/_/g,'/') + '='.repeat((4 - input.length%4)%4) then decode.

Supported Standards & Compatibility

Implements RFC 4648 §4 (standard alphabet) — the same as email MIME RFC 2045, atob/btoa in browsers. Compatible with Node Buffer.from(str).toString('base64') and Python base64.b64encode(). Browser support: Chrome 4+, Firefox 2+, Safari 3+, Edge all — uses only btoa, atob, encodeURIComponent, decodeURIComponent, Clipboard API, FileReader, Fetch, Fullscreen with graceful fallbacks.

Tip: On older browsers if btoa missing, polyfill via window.btoa || (s => Buffer.from(s,'binary').toString('base64')) — but modern html-compiler.com audience is evergreen 2026 browsers so native suffices.

Target Keywords & Search Intent Map (SEO Authority)

We built this page to rank for the full cluster around base64 encoder — covering tool and informational intents naturally:

Primary Keyword	Monthly Volume*	Intent	How We Cover It
base64 encoder	8,100	Tool	Title, H1, hero, Encode button, URL, JSON-LD
base64 decoder	6,600	Tool	H1, Decode button, FAQ, comparison table
base64 encode online	2,900	Tool	Hero, How-to guide, meta description
base64 decode	4,400	Tool	Buttons, examples, try/catch section
encode base64 / decode base64	2,100	Tool	Content synonyms, code snippet, H2s
base64 to text / text to base64	1,600	Tool	Before/after table, features, FAQ
image to base64 / data uri encoder	1,300	Tool	Use cases section, data URI example
base64 encode decode online free	720	Tool	Title, badges, CTA 2026

*Estimated volumes for illustration — we target all variants through H2s, tables, and FAQPage schema for featured snippets.

Frequently Asked Questions (FAQ)

What is Base64 and why encode to Base64?

Base64 is a binary-to-text encoding that converts 3 bytes into 4 ASCII characters from A-Za-z0-9+/ with = padding. You encode to Base64 when you must send binary (images, files) through text-only systems like email MIME, JSON APIs, XML, or data URIs in HTML/CSS. Without it, bytes like 0x00 or 0xFF get stripped or misinterpreted. Base64 guarantees safe transport at cost of +33% size — our live Diff shows exact overhead.

How to use this base64 encoder & decoder online?

Paste plain text into 📥 Input Text and click 🔒 Encode — we run btoa(unescape(encodeURIComponent(text))) for UTF-8 safety and show Base64 in Output. To base64 decode, paste Base64 string (e.g., SGVsbG8gV29ybGQh) into Input and click 🔓 Decode — we run decodeURIComponent(escape(atob(text))) inside try/catch. Then Copy or Download. Also use Paste, Upload (FileReader readAsText), or URL fetch for triple input.

Will encoding change the meaning? Is it lossless?

Yes, lossless. Encode → decode round-trip is byte-identical if you use UTF-8 wrapper. Hello 🚀 → SGVsbG8g8J+agA== → back to Hello 🚀 via decodeURIComponent(escape(atob)). Without wrapper, non-Latin1 chars throw or corrupt. We use wrapper by default, so your emoji, Arabic, Chinese survive intact. Always keep original if you need raw bytes.

Why does Decode show “Invalid Base64” error?

Common causes: missing padding (=), illegal chars, line breaks, or using Base64URL (-_ instead of +/). Our decoder does try { atob(text.trim()) } catch(e){ show “Invalid Base64 — check padding and characters” }. Fix: ensure length % 4 == 0, only chars A-Za-z0-9+/=, restore padding, and for JWT, convert -→+, _→/ before decode. Also trim trailing newline from email bodies.

Is Base64 secure? Can I encode passwords?

No. Base64 is encoding, not encryption — anyone can decode it instantly with this tool or atob. Do not use for passwords, tokens, or PII. Basic-auth Base64 is just obfuscation over HTTPS, not protection. For real security use bcrypt/Argon2 for passwords, AES-GCM for data, and TLS for transport. Use Base64 only for transport safety.

Can I encode images or files to Base64?

Yes for text-based files: upload any .txt/.json/.svg/.html — we handle file as text via FileReader.readAsText then encode. For binary images, technically readAsText may mangle bytes — ideal is readAsDataURL and extract after comma. But per our spec we read as text, which works for SVG/text images and demos. For true logo.png binary, you can still drag text or use a dedicated image-to-base64 tool; the Base64 spec itself is same. Check Output Diff to confirm size and use data:image/png;base64, prefix.

Is this base64 encode online free and private?

100% free, client-side, no signup, no server upload. Uses native btoa/atob in your browser — your text never leaves device, safe for private snippets. Works offline after first load. No logs, no cookies. Just bookmark html-compiler.com/base64-encoder/ and encode/decode anytime.

What is difference between standard Base64 and Base64URL?

Standard Base64 (RFC 4648 §4) uses + / = which need URL-encoding in query strings. Base64URL (§5) replaces +→-, /→_ and strips padding = for compact URLs and JWTs. Our tool uses standard; if you have JWT tail, add back padding: pad = '='.repeat((4 - len%4)%4), replace -→+ and _→/, then decode.

Best Base64 Encoder & Decoder Online Free in 2026 — Start Encoding Now

Whether you are a student embedding an SVG icon as data URI, a developer encoding a username:password header for curl, or an engineer inspecting a data:image/png;base64 payload from canvas, a reliable base64 encoder and base64 decoder saves minutes on every task. Stop guessing padding or wrestling with InvalidCharacterError — paste text above, hit 🔒 Encode for safe Base64 or 🔓 Decode to restore original, and copy the result with one click. The same URL ranks for base64 encode online and base64 decode because we serve both directions with UTF-8 correctness.

Bookmark html-compiler.com/base64-encoder/ — the lightweight, private, evergreen base64 encoder, base64 decoder, and data URI helper for 2026 and beyond. Loved for its htmlbeautifier.org-style light cards, 280px editors, Diff stats, and full Paste/Upload/URL flow. Explore our ecosystem: HTML Beautifier • CSS Beautifier • JS Beautifier • HTML Minifier • JSON Beautifier • XML Beautifier • URL Encoder • Markdown to HTML • HTML to JSX • HTML Compiler — all free, all client-side, no signup ever.

Base64 Encoder & Decoder — Encode Decode Online