Base64 Encoding Explained: Complete Guide with Examples

1. Take 3 bytes (24 bits) of binary data
2. Divide into four 6-bit groups
3. Convert each 6-bit group to a decimal number (0-63)
4. Map each number to the Base64 character set
5. If input isn't divisible by 3, add padding '='

Text: "Man"
ASCII: M=77, a=97, n=110

Binary: 01001101 01100001 01101110

Split into 6-bit groups:
010011 | 010110 | 000101 | 101110

Convert to decimal:
19 | 22 | 5 | 46

Map to Base64 chars:
T | W | F | u

Result: "TWFu"

Input: "Ma" (2 bytes)
Binary: 01001101 01100001
With padding: 01001101 01100001 00000000

Split: 010011 | 010110 | 000100 | (padding)
Decimal: 19 | 22 | 4 | (pad)
Base64: T | W | E | =

Result: "TWE="

Input: "M" (1 byte)
Binary: 01001101
With padding: 01001101 00000000 00000000

Split: 010011 | 010000 | (padding) | (padding)
Decimal: 19 | 16 | (pad) | (pad)
Base64: T | Q | = | =

Result: "TQ=="

<!-- Embed image directly in HTML -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

<!-- Advantages: -->
<!-- - No external HTTP request -->
<!-- - Works offline -->
<!-- - Faster for small images -->

<!-- Disadvantages: -->
<!-- - Larger HTML file size -->
<!-- - No browser caching -->
<!-- - Not SEO friendly -->

.icon {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZD0iTTEwIDIwdi02aDR2Nmg1di04aDNMMTIgM3w==);
  width: 24px;
  height: 24px;
}

/* Best for: */
/* - Small icons and logos */
/* - SVG graphics */
/* - Images used across multiple pages */

# HTTP Basic Authentication uses Base64

# Username: user
# Password: pass123
# Combined: user:pass123

# Base64 encoded: dXNlcjpwYXNzMTIz

# HTTP Header:
Authorization: Basic dXNlcjpwYXNzMTIz

# Note: This is NOT secure without HTTPS!
# Anyone can decode: dXNlcjpwYXNzMTIz → user:pass123

// Create a data URL from text
const text = "Hello, World!";
const dataUrl = `data:text/plain;base64,${btoa(text)}`;
console.log(dataUrl);
// data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==

// Create a data URL from JSON
const jsonData = { name: "John", age: 30 };
const jsonString = JSON.stringify(jsonData);
const jsonDataUrl = `data:application/json;base64,${btoa(jsonString)}`;

// Create a downloadable link
const link = document.createElement('a');
link.href = jsonDataUrl;
link.download = 'data.json';
link.click();

// API request with Base64 encoded file
{
  "filename": "document.pdf",
  "mimeType": "application/pdf",
  "content": "JVBERi0xLjQKJeLjz9MKMyAwIG9iago8PC9UeXBlIC9QYWdlCi9QYXJlbnQgMSAwIFIKL01lZGlhQm94IFswIDAgNjEyIDc5Ml0KL0NvbnRlbnRzIDQgMCBSCj4+CmVuZG9iago=",
  "size": 1024
}

// Decode on server:
const buffer = Buffer.from(data.content, 'base64');
fs.writeFileSync(data.filename, buffer);

// Browser (modern)
const text = "Hello, World!";
const encoded = btoa(text);
console.log(encoded); // SGVsbG8sIFdvcmxkIQ==

const decoded = atob(encoded);
console.log(decoded); // Hello, World!

// Node.js
const text = "Hello, World!";
const encoded = Buffer.from(text).toString('base64');
console.log(encoded); // SGVsbG8sIFdvcmxkIQ==

const decoded = Buffer.from(encoded, 'base64').toString('utf8');
console.log(decoded); // Hello, World!

// Unicode support (browser)
function base64EncodeUnicode(str) {
  return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
    (match, p1) => String.fromCharCode('0x' + p1)));
}

function base64DecodeUnicode(str) {
  return decodeURIComponent(atob(str).split('').map(c =>
    '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)).join(''));
}

import base64

# Encode string to Base64
text = "Hello, World!"
encoded = base64.b64encode(text.encode('utf-8'))
print(encoded)  # b'SGVsbG8sIFdvcmxkIQ=='

# Decode Base64 to string
decoded = base64.b64decode(encoded).decode('utf-8')
print(decoded)  # Hello, World!

# Encode file to Base64
with open('image.png', 'rb') as file:
    file_content = file.read()
    encoded_file = base64.b64encode(file_content)

# Decode Base64 to file
decoded_file = base64.b64decode(encoded_file)
with open('output.png', 'wb') as file:
    file.write(decoded_file)

# URL-safe encoding
url_encoded = base64.urlsafe_b64encode(text.encode('utf-8'))
url_decoded = base64.urlsafe_b64decode(url_encoded).decode('utf-8')

<?php
// Encode string to Base64
$text = "Hello, World!";
$encoded = base64_encode($text);
echo $encoded; // SGVsbG8sIFdvcmxkIQ==

// Decode Base64 to string
$decoded = base64_decode($encoded);
echo $decoded; // Hello, World!

// Encode file to Base64
$fileContent = file_get_contents('image.png');
$encodedFile = base64_encode($fileContent);

// Decode Base64 to file
$decodedFile = base64_decode($encodedFile);
file_put_contents('output.png', $decodedFile);

// Check if string is valid Base64
if (base64_decode($encoded, true) !== false) {
    echo "Valid Base64";
}
?>

import java.util.Base64;
import java.nio.charset.StandardCharsets;

// Encode string to Base64
String text = "Hello, World!";
String encoded = Base64.getEncoder()
    .encodeToString(text.getBytes(StandardCharsets.UTF_8));
System.out.println(encoded); // SGVsbG8sIFdvcmxkIQ==

// Decode Base64 to string
byte[] decodedBytes = Base64.getDecoder().decode(encoded);
String decoded = new String(decodedBytes, StandardCharsets.UTF_8);
System.out.println(decoded); // Hello, World!

// URL-safe encoding
String urlEncoded = Base64.getUrlEncoder()
    .encodeToString(text.getBytes(StandardCharsets.UTF_8));

// URL-safe decoding
byte[] urlDecodedBytes = Base64.getUrlDecoder().decode(urlEncoded);
String urlDecoded = new String(urlDecodedBytes, StandardCharsets.UTF_8);

# Linux/Mac - Encode string
echo -n "Hello, World!" | base64
# SGVsbG8sIFdvcmxkIQ==

# Linux/Mac - Decode string
echo "SGVsbG8sIFdvcmxkIQ==" | base64 -d
# Hello, World!

# Encode file
base64 input.txt > output.b64

# Decode file
base64 -d input.b64 > output.txt

# Windows PowerShell - Encode
[Convert]::ToBase64String([Text.Encoding]::UTF8.GetBytes("Hello, World!"))

# Windows PowerShell - Decode
[Text.Encoding]::UTF8.GetString([Convert]::FromBase64String("SGVsbG8sIFdvcmxkIQ=="))

// Standard Base64 (may have + / =)
const standard = btoa("subjects?_d");
console.log(standard); // c3ViamVjdHM/X2Q=

// URL-safe Base64 (- _ no padding)
function base64UrlEncode(str) {
  return btoa(str)
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=/g, '');
}

function base64UrlDecode(str) {
  str = str.replace(/-/g, '+').replace(/_/g, '/');
  while (str.length % 4) str += '=';
  return atob(str);
}

const urlSafe = base64UrlEncode("subjects?_d");
console.log(urlSafe); // c3ViamVjdHM_X2Q

// Use in URL
const url = `https://api.example.com/data?token=${urlSafe}`;

// ❌ WRONG - Base64 is NOT encryption!
const password = "mySecretPassword123";
const "encrypted" = btoa(password);
// Anyone can decode this!

console.log(atob("encrypted")); // mySecretPassword123

// ✅ CORRECT - Use real encryption
const crypto = require('crypto');
const algorithm = 'aes-256-cbc';
const key = crypto.randomBytes(32);
const iv = crypto.randomBytes(16);

const cipher = crypto.createCipheriv(algorithm, key, iv);
let encrypted = cipher.update(password, 'utf8', 'base64');
encrypted += cipher.final('base64');

// Now it's actually encrypted (needs key to decrypt)

// ❌ WRONG - Unicode characters may break
const emoji = "Hello 👋 World!";
try {
  const broken = btoa(emoji); // May throw error or corrupt data
} catch (e) {
  console.error("Failed to encode:", e.message);
}

// ✅ CORRECT - Convert to UTF-8 first
function base64EncodeUnicode(str) {
  return btoa(encodeURIComponent(str).replace(
    /%([0-9A-F]{2})/g,
    (match, p1) => String.fromCharCode(parseInt(p1, 16))
  ));
}

function base64DecodeUnicode(str) {
  return decodeURIComponent(
    Array.from(atob(str))
      .map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
      .join('')
  );
}

const encoded = base64EncodeUnicode(emoji);
const decoded = base64DecodeUnicode(encoded);
console.log(decoded); // Hello 👋 World!

// Some Base64 strings may be missing padding
const withoutPadding = "SGVsbG8"; // Missing =
const withPadding = "SGVsbG8=";

// Add padding if missing
function fixBase64Padding(str) {
  while (str.length % 4 !== 0) {
    str += '=';
  }
  return str;
}

try {
  atob(withoutPadding); // May fail in strict implementations
} catch (e) {
  const fixed = fixBase64Padding(withoutPadding);
  const decoded = atob(fixed); // Works now
  console.log(decoded);
}

// ❌ WRONG - Standard Base64 in URL
const data = btoa("[email protected]");
const url = `https://api.com/user?data=${data}`;
// May break: contains + or / characters

// ✅ CORRECT - URL-safe Base64
function toUrlSafeBase64(str) {
  return btoa(str)
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=/g, '');
}

const urlSafeData = toUrlSafeBase64("[email protected]");
const safeUrl = `https://api.com/user?data=${urlSafeData}`;
// Safe to use in URLs

function isValidBase64(str) {
  // Check if string matches Base64 pattern
  const base64Regex = /^[A-Za-z0-9+\/]*={0,2}$/;
  if (!base64Regex.test(str)) {
    return false;
  }

  // Check if length is valid (multiple of 4 with padding)
  if (str.length % 4 !== 0) {
    return false;
  }

  // Try to decode
  try {
    atob(str);
    return true;
  } catch (e) {
    return false;
  }
}

function safeBase64Decode(str) {
  if (!isValidBase64(str)) {
    throw new Error('Invalid Base64 string');
  }

  try {
    return atob(str);
  } catch (error) {
    throw new Error(`Failed to decode: ${error.message}`);
  }
}

// Usage
const encoded = "SGVsbG8sIFdvcmxkIQ==";
if (isValidBase64(encoded)) {
  const decoded = safeBase64Decode(encoded);
  console.log(decoded);
}

// js-base64 - Better Unicode support
import { Base64 } from 'js-base64';

const encoded = Base64.encode('Hello 👋');
const decoded = Base64.decode(encoded);

// base64-js - Fast pure JS implementation
import * as base64js from 'base64-js';

const bytes = new TextEncoder().encode('Hello');
const encoded = base64js.fromByteArray(bytes);
const decoded = base64js.toByteArray(encoded);

// Buffer (Node.js built-in)
const encoded = Buffer.from('Hello').toString('base64');
const decoded = Buffer.from(encoded, 'base64').toString();

# base64 (built-in on most systems)
echo "Hello" | base64

# openssl base64
echo "Hello" | openssl base64
echo "SGVsbG8=" | openssl base64 -d

# GNU coreutils base64 with options
base64 --wrap=0 input.txt > output.b64  # No line wrapping
base64 --decode input.b64 > output.txt

# base64 with URLs
echo "[email protected]" | base64 | tr '+/' '-_' | tr -d '='

// Open browser console (F12) and run:

// Encode
btoa("Hello, World!")
// Output: "SGVsbG8sIFdvcmxkIQ=="

// Decode
atob("SGVsbG8sIFdvcmxkIQ==")
// Output: "Hello, World!"

// Encode Unicode (safe method)
btoa(unescape(encodeURIComponent("Hello 👋")))

// Decode Unicode
decodeURIComponent(escape(atob("SGVsbG8g8J+Riw==")))