Base64 File Encoding
Files are binary data at their core. Base64 encodes that binary into text, making files safe to embed in JSON, HTML, CSS, and API requests.
Upload a file to see encoding details
Drop any file here, or click to choose
Only metadata is read — files are never uploaded
What Is Base64 File Encoding?
Every file on a computer — images, PDFs, audio, fonts — is fundamentally a sequence of bytes (integers from 0–255). Many of these byte values correspond to control characters that get corrupted or truncated when transmitted through text-based protocols like HTTP, SMTP, or JSON.
Base64 solves this: it converts any binary data into 64 safe printable ASCII characters (A–Z, a–z, 0–9, +, /), allowing file content to be safely embedded in any text format.
The trade-off is a size increase of roughly 33% — the unavoidable cost of encoding 3 bytes as 4 characters.
How a File Becomes a Base64 String
Read the file bytes
A file on disk or in memory is a stream of bytes (integers 0–255). A PNG file starts with 89 50 4E 47, a PDF with 25 50 44 46 — each format has its own binary structure.
89 50 4E 47 0D 0A 1A 0A … (PNG magic bytes)Take 3 bytes at a time
The Base64 algorithm processes 3 bytes (24 bits) at a time. If the last group has fewer than 3 bytes, it is zero-padded to 24 bits.
Bytes: 0x4D 0x61 0x6E → Binary: 01001101 01100001 01101110Split into 4 groups of 6 bits
24 bits divided equally into 4 groups of 6 bits each. A 6-bit value ranges from 0–63, matching exactly the 64 characters in the Base64 alphabet.
010011 | 010110 | 000101 | 101110 → 19, 22, 5, 46Map to Base64 characters
Use each 0–63 value to look up the Base64 alphabet (A=0, B=1 … Z=25, a=26 … z=51, 0=52 … 9=61, +=62, /=63) to get 4 ASCII characters.
19→T, 22→W, 5→F, 46→u → "TWFu"Add padding
If the input byte count is not a multiple of 3, the last group gets = padding: 1 remaining byte → ==, 2 remaining bytes → =. This ensures the output length is always a multiple of 4.
"M" (1 byte) → "TQ==", "Ma" (2 bytes) → "TWE="Prepend the Data URI prefix
A complete Base64 file is typically wrapped in a Data URI with a MIME type prefix, telling the browser or recipient what kind of file it is.
data:image/png;base64,[Base64 string]Recognizing File Types by Their Base64 Start
Every file format has fixed "magic bytes" at the start. After Base64 encoding, these bytes always produce the same first few characters — useful for quick file type identification:
| File Type | Base64 Start | Data URI Prefix | Note |
|---|---|---|---|
| PNG Image | iVBORw0KGgo… | data:image/png;base64, | PNG header 89504E47 in Base64 |
| JPEG Image | /9j/4AAQSkZJ… | data:image/jpeg;base64, | JPEG header FFD8FF in Base64 |
| PDF Document | JVBERi0x… | data:application/pdf;base64, | %PDF- in Base64 |
| SVG Graphic | PHN2ZyB4bWxu… | data:image/svg+xml;base64, | <svg xmlns= in Base64 |
| WOFF2 Font | d09GMgAB… | data:font/woff2;base64, | WOFF2 file header in Base64 |
| ZIP Archive | UEsDBAA… | data:application/zip;base64, | PK header (ZIP magic) in Base64 |
How Much Larger Does Base64 Make a File?
Base64 chars = ⌈original bytes / 3⌉ × 4
| Original Size | Base64 Size | Increase | Typical Use |
|---|---|---|---|
| 1 KB | ≈ 1.37 KB | +37% | Small icon, acceptable |
| 5 KB | ≈ 6.7 KB | +34% | CSS background, borderline |
| 50 KB | ≈ 67 KB | +34% | HTML gets noticeably larger |
| 500 KB | ≈ 667 KB | +33% | API transfer starts to hurt |
| 5 MB | ≈ 6.7 MB | +33% | Browser will lag noticeably |
| 50 MB | ≈ 67 MB | +33% | Not recommended; use object storage |
Actual overhead is 33%–37%. Small files have slightly higher overhead (padding ratio is larger).
When to Use and When to Avoid
Good use cases for Base64 file encoding
- Small images inlined in HTML / CSS (< 5 KB)
- HTML email images (email clients block external URLs)
- CSS @font-face with a small font subset
- Small file attachments in JSON APIs (< 1 MB)
- Self-contained HTML files that bundle all assets
- Favicon directly in a <link> tag
Bad use cases for Base64 file encoding
- Large files (> 10 KB) — size bloat + browser slowdown
- Resources that need independent browser caching
- Images shared across multiple pages (no cache reuse)
- User file uploads to a server (use multipart/form-data)
- Streaming scenarios
- Video / audio files (enormous size)
Related Tools
File to Base64
Convert any file to Base64 or Data URI, with multiple output formats.
Base64 to File
Decode a Base64 string back to the original file and download it.
Base64 Size Calculator
Enter the original file size to estimate the exact Base64 output size.
Base64 Data URI
Parse a Data URI's MIME type and size, or generate a Data URI from Base64.
API Base64
Generate a JSON API payload with JS, cURL, Python, and PHP examples.
Base64 MIME Types
Look up the MIME type and Data URI prefix for any file extension.
Frequently Asked Questions
Why can a file be converted to Base64?
All files are fundamentally a sequence of bytes. Base64 converts every 3 bytes to 4 ASCII characters — this process is universal and works for any file format (PNG, PDF, font, etc.) without needing to know the internal structure.
Can any file be Base64 encoded?
Yes. Base64 treats the file as raw binary data regardless of content — images, PDFs, archives, executables. The MIME type in the Data URI prefix tells the recipient what kind of file it is.
Does Base64 encoding corrupt the file?
No. Base64 is fully reversible — decoding recovers the original bytes exactly, with no data loss. It is not compression and does not alter the content. Only the representation changes: binary becomes ASCII text.
How does the browser know what type of file a Data URI is?
The MIME type in the Data URI tells the browser. For example, data:image/png;base64,... is a PNG image; data:application/pdf;base64,... is a PDF. Choosing the correct MIME type is essential for a Data URI to be rendered correctly.
Why are large files unsuitable for Base64?
Three reasons: ① Size increases by 33%, slowing transfer; ② Client-side Base64 encoding runs synchronously on the main thread, freezing the UI for large files; ③ Peak memory is ~2.3× the original file size (ArrayBuffer + string coexist). Large files should use multipart/form-data or direct object storage upload.
How do I Base64-encode a file in Node.js?
const b64 = fs.readFileSync("file.png").toString("base64"), or const b64 = Buffer.from(fileBuffer).toString("base64"). To decode: Buffer.from(b64, "base64"). Node's Buffer class handles raw bytes directly, without the Latin-1 limitation of the browser's btoa().