Base64 Encoder & Decoder

💡 What is Base64 Encoding?

Base64 is a method for converting binary data (or text) into a safe, text-only format that can be transmitted over channels designed for text. Think of it as a universal translator for data.

Real-world scenarios where Base64 is essential:

• 📧 Email attachments — Every image in your email is Base64 encoded
• 🔑 API authentication — Basic Auth headers use Base64 (username:password)
• 🖼️ Embedded images — Data URIs in HTML/CSS (like inline profile pictures)
• 📦 JSON payloads — Sending binary data in text-based APIs
• 🔐 JWT tokens — JSON Web Tokens use Base64url encoding
• 💾 Local storage — Storing binary data in browser localStorage

🔑 Example 1: API Authentication (Basic Auth)

The problem: You need to call an API that requires Basic Authentication with username "admin" and password "secret123".

Step 1 - Combine: admin:secret123

Step 2 - Encode to Base64: YWRtaW46c2VjcmV0MTIz

Step 3 - Add to HTTP header: Authorization: Basic YWRtaW46c2VjcmV0MTIz

💡 Pro tip: Most API documentation includes this step, but now you can generate it instantly.

🖼️ Example 2: Embedding an Image in HTML (Data URI)

The problem: You want to display a small logo without hosting it as a separate file.

Original image data (simplified): logo.png binary data...

After Base64 encoding: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...

Usage in HTML: <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...">

✅ Benefit: No extra HTTP request = faster page load for small images.

📧 Example 3: Email Attachment Encoding

The problem: SMTP (email protocol) was designed for text, not binary files.

Solution: Email clients automatically Base64 encode attachments.

Example: A PDF file named "invoice.pdf" is converted to a long Base64 string before being sent. Your email client decodes it automatically when you receive it.

💡 You don't see this: It happens behind the scenes, but now you understand why!

🔐 Example 4: JWT Token Verification

The problem: You received a JWT (JSON Web Token) and need to decode the payload.

JWT structure: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOjEyMywicm9sZSI6ImFkbWluIn0.signature

Middle part (payload) after decoding: {"userId":123,"role":"admin"}

💡 How to check: Decode the middle section to see what data the token contains.

🌐 Example 5: URL-Safe Encoding for API Parameters

The problem: Standard Base64 uses + and / which have special meanings in URLs.

Original text: Hello+World/Secret

Standard Base64: SGVsbG8rV29ybGQvU2VjcmV0 (contains + and /)

URL-Safe Base64: SGVsbG8rV29ybGQvU2VjcmV0 replaces + with - and / with _

Usage in URL: https://api.example.com/data?token=SGVsbG8rV29ybGQvU2VjcmV0 ✅ Safe!

💾 Example 6: Storing Binary Data in localStorage

The problem: Browser localStorage only stores strings, not binary data.

Solution: Convert binary data to Base64 string first.

Example (simplified):

// User's profile picture as binary data
const imageData = getImageBinary();

// Encode to Base64 for storage
const base64Image = btoa(imageData);
localStorage.setItem('profileImage', base64Image);

// Later, retrieve and decode
const storedImage = localStorage.getItem('profileImage');
const originalImage = atob(storedImage);

📦 Example 7: Sending Binary Data in JSON API

The problem: JSON is text-only, but you need to send a file via API.

Solution: Convert file to Base64 before including in JSON.

JSON payload:

{
  "filename": "report.pdf",
  "content": "JVBERi0xLjQKMSAwIG9iago8PCAvVHlwZSAvQ2F0YWxvZwovUGFnZXMgMiAwIFIKPj4KZW5kb2JqCg==",
  "contentType": "application/pdf"
}