Base64 Explained

Interactive study guide

What is Base64?

Base64 is a binary-to-text encoding. It allows any binary data (images, PDFs, executables, ZIP files...) to be represented using only 64 printable characters. It does not compress data, encrypt it, or change its meaning.

The Mind-Blowing Part

We can embed an image inside a single HTML file without shipping a PNG. The browser can reconstruct the original image solely from text.
PNG bytes
      ↓
Base64 Encoding
      ↓
"iVBORw0KGgoAAAANSUhEUgAA..."
      ↓
Browser decodes
      ↓
Original PNG bytes
      ↓
Rendered image

Images Are Already Just Numbers

A PNG is not "a picture" inside the file. It is simply bytes:

89 50 4E 47 0D 0A 1A 0A ...

Base64 merely changes how those bytes are represented.

iVBORw0KGgoAAAANSUhEUgAA...

Representations

RepresentationExample
Binary11111111
Decimal255
HexadecimalFF
Base64/w== (for one byte 0xFF)

Different representations, same underlying information.

Why "Base64"?

Its alphabet contains 64 symbols:

A-Z (26)
a-z (26)
0-9 (10)
+ /
----------------
64 characters

Each symbol represents 6 bits because 2⁶ = 64.

Lossless Means Exact

Encoding and decoding produce the exact original bytes.

Original File → Base64 → Original File

Not "almost the same". Exactly the same.

Hashes Stay the Same

Original PNG
SHA-256 = A1B2C3...

PNG → Base64 → PNG

SHA-256 = A1B2C3...

If the decoded bytes are identical, the hash is identical. Hash algorithms only care about bytes.

Encoding vs Encryption vs Hashing

TechniqueReversible?Purpose
Base64YesTransport binary as text
EncryptionYes (with key)Confidentiality
HashingNoIntegrity verification

Why Base64 Is ~33% Larger

Bytes are 8 bits. Base64 emits 6-bit symbols, so more characters are required to represent the same information. The convenience of plain text comes at roughly a 33% size increase.

Where You'll See It

PowerShell

[Convert]::ToBase64String([IO.File]::ReadAllBytes("image.png"))
Get-FileHash image.png -Algorithm SHA256

Try It