Base64 File Encoder — Encode Files to Base64 Online
Encode any file to a Base64 string or decode a Base64 string back to a downloadable file. Supports drag-and-drop, file info display, and one-click copy. 100% client-side — your files never leave your device.
What is Base64 encoding? Base64 is a binary-to-text encoding defined in RFC 4648 that rewrites every three bytes of binary data as four printable ASCII characters taken from A–Z, a–z, 0–9, + and /, padding the last group with = signs. It exists so binary files can travel through channels that only carry text — JSON fields, HTML attributes, email bodies — at the cost of making the data about 33% larger.
How to Use the Base64 File Encoder
- Drop a file into the Encode tab — Drag a file onto the dashed area or click it to open a file picker. Any type works — the encoder never inspects the contents, it only reads bytes.
-
Check the detected file details — Name, size and the browser-reported MIME type appear above the output. A blank or
unknowntype just means your operating system has no mapping for that extension; it has no effect on the encoding. -
Copy or download the Base64 string — The output box holds the raw payload only, with no
data:prefix. Copy Base64 puts it on the clipboard; Download .txt saves it as a text file named after the original. -
Switch to Decode to go the other way — Paste a Base64 string into the Decode tab. Line breaks and wrapped lines are tolerated, but strip any leading
data:image/png;base64,header first — the decoder expects the payload on its own. -
Name the output file before downloading — Type a file name with the correct extension, such as
logo.png. Decode & Download reads the first two decoded bytes to pick a MIME type and saves the file; leaving the box empty producesdecoded-filewith no extension. - Use Copy Decoded only for text payloads — Copy Decoded copies the decoded bytes as characters. That is useful for Base64-wrapped text, but each byte becomes one Latin-1 character, so images come out as noise and UTF-8 accents come back mangled.
How Base64 Encoding Works
Base64 solves a transport problem, not a storage one. Plenty of channels were designed for text and will corrupt, strip or reinterpret arbitrary bytes: SMTP historically guaranteed only 7-bit ASCII, a JSON string cannot hold raw control characters, and a URL has a small set of legal characters. Base64 sidesteps all of it by re-expressing binary data using 64 characters that survive almost any pipeline.
The mechanism is a change of base. The encoder takes the input three bytes — 24 bits — at a time and re-cuts those 24 bits into four 6-bit groups. Each group is a number from 0 to 63, which indexes into the alphabet fixed by RFC 4648:
A–Z = 0–25, a–z = 26–51, 0–9 = 52–61, + = 62, / = 63
When the input length is not a multiple of three, the last group is short. The encoder zero-fills the missing bits and
appends = characters so the output length is always a multiple of four: one leftover byte produces two
characters plus ==, two leftover bytes produce three characters plus =. That is why a Base64
string ends with nothing, one or two equals signs, and never three.
The size cost follows directly from four characters per three bytes:
encoded length = 4 × ceil(bytes ÷ 3)That is roughly a 33% increase before any line wrapping or data URI header is added. A 100 KB image becomes about 137 KB of text. Gzip on the wire claws some of that back, because the encoded output is far more repetitive than the original binary, but never all of it.
What this tool does under the hood
Encoding uses the browser's FileReader API. The file is read with readAsDataURL, which returns
a complete data URI such as data:image/png;base64,iVBORw0…, and the tool then splits on the first comma and
keeps only what follows. That is why the output box shows the bare payload with no data: prefix — if you
want a data URI, you add the header yourself.
Decoding uses atob, the browser's built-in Base64 decoder, then copies the resulting characters into a
Uint8Array one byte at a time. Those bytes go into a Blob that the browser saves through a
temporary object URL. Neither direction makes a network request, so both tabs keep working with the connection cut.
Turning the output into a data URI
A data URI is the payload with a header glued to the front: data:, the MIME type, ;base64,,
then the string. For a PNG that is data:image/png;base64, followed by whatever this page produced. Use the
exact MIME type — an <img> tag is forgiving about a wrong type, but stylesheets, web fonts and
<object> embeds often fail silently instead. The MIME Type Lookup
tool maps extensions to the correct string.
File Type Detection When Decoding
A Base64 string carries no metadata, so the decoder has to guess what it just produced. Before building the download it compares the first two decoded bytes against a short list of file signatures — the magic numbers most binary formats put at the very start of the file — and labels the Blob accordingly.
| First two bytes | MIME type applied | Formats that start this way |
|---|---|---|
89 50 | image/png | PNG |
FF D8 | image/jpeg | JPEG / JPG |
47 49 | image/gif | GIF (the ASCII "GI" of GIF89a) |
25 50 | application/pdf | PDF (the ASCII "%P" of %PDF-) |
50 4B | application/zip | ZIP, and everything built on it: DOCX, XLSX, PPTX, JAR, ODT, EPUB |
| anything else | application/octet-stream | Treated as a generic binary download |
Two bytes is a deliberately loose test, so the ZIP row in particular covers a large family of formats that all share the
same container. The MIME type only affects how the browser labels the download; the file name you type is what decides
which application opens it afterwards. Give it the right extension — a perfectly valid PNG saved as report
with no suffix will not open on a double-click on most systems.
Standard Base64, Base64url, and What Base64 Is Not
There are two common alphabets. Standard Base64 uses + and / for values 62 and 63. The URL-safe
variant, also specified in RFC 4648, substitutes - and _ so the string can sit in a URL path or
query without percent-encoding, and it usually drops the = padding as well. JSON Web Tokens use the URL-safe
form, which is why a token segment pasted into a standard decoder throws an error. Replace - with
+ and _ with / first, or use the JWT Decoder, which
already knows the difference.
One more distinction worth keeping straight: Base64 and the MIME transfer encodings that wrap it are separate layers. Email
attachments are Base64 inside a MIME part with its own headers and a 76-character line limit, and PEM certificates are
Base64 between -----BEGIN----- and -----END----- markers. Paste only the payload here; the header
lines are not part of the encoded data and will make the decode fail.
Base64 is an encoding, not encryption. Anyone holding the string can decode it with a single function call, including this page. Kubernetes Secret values and HTTP Basic Auth headers are Base64 for transport safety, not confidentiality. If the contents need protecting, encrypt them before encoding, and treat any Base64 blob you find in a config file as readable plain text.
Frequently Asked Questions
Base64 moves binary data through text-only channels. Common uses are inlining small images and fonts in CSS as data URIs, attaching files to JSON API requests, encoding email attachments in MIME parts, storing values in Kubernetes Secrets, and wrapping certificates and keys in PEM files. Anywhere a field is defined as a string but the payload is bytes, Base64 is usually the encoding in play.
About 33%. Every three bytes become four characters, so the encoded length is 4 x ceil(bytes / 3) — a 3 MB file yields roughly 4 MB of text. A data URI adds a few more bytes for the data: header, and line wrapping adds two per line where it is applied. That overhead is why inlining is worth it for a 2 KB icon and a bad trade for a 2 MB photo.
The tool sets no limit, but your browser does. The whole file and its encoded string both sit in tab memory at once, so peak usage is roughly 2.3 times the file size. Files under about 50 MB are comfortable on a typical desktop; several hundred megabytes will make the tab unresponsive or crash it. Nothing is streamed, so there is no partial result to recover if it stalls.
No. Encoding uses the FileReader API and decoding uses atob, both of which run inside your tab. No request carries the file or the string, there is no account, and closing the tab discards everything. Once the page has loaded you can go offline and both directions still work — which is the simplest way to verify the claim yourself.
Four causes account for nearly all of it. A leading data:image/png;base64, header was left in place. The string is base64url and contains - or _, which the standard decoder rejects. The padding was stripped, leaving a length that is not a multiple of four. Or the copy was truncated part way. Whitespace and line breaks are not a problem — the browser's decoder ignores them.
Copy Decoded maps each decoded byte to one character, which is a Latin-1 reading of the bytes. For plain ASCII that is exact, but a UTF-8 string encoded to Base64 comes back with every accented or non-Latin character split into two nonsense symbols. For text in any language beyond ASCII, decode to a file instead and open it with an editor set to UTF-8.
A data URI is the Base64 string plus a MIME header, and it is what belongs in an src attribute, a CSS url() or a font-face declaration. A bare Base64 string is what belongs in a JSON field, a YAML value or a database column, because the consumer already knows the type. This tool outputs the bare string, so add the data:<type>;base64, prefix only when the target needs a URI.
Neither. It makes files larger, not smaller, and it provides no confidentiality at all — decoding needs no key and takes microseconds. If size matters, compress before encoding or send the raw bytes as multipart form data. If secrecy matters, encrypt the file first; Base64 then simply carries the ciphertext through a text channel.
Use Cases
Inlining a Small Icon in CSS
Encode a 1–3 KB SVG or PNG sprite, prepend the data: header, and drop it straight into a background-image rule so the icon renders on first paint instead of costing an extra round trip.
Testing a File-Upload API by Hand
Build a JSON request body for an endpoint that expects a Base64 content field — a signature image, a receipt scan — without writing a script or spinning up a client just to produce the payload.
Filling a Kubernetes Secret Manifest
Encode a TLS certificate or a service-account JSON file into the Base64 string a Secret's data: block requires, then decode a value from an existing manifest to check that the right file was committed.
Recovering an Attachment from a Raw Email
Copy the Base64 block out of a saved .eml source or a log entry, paste it into the Decode tab, name it with the extension from the MIME headers, and get the original file back on disk.
Shipping a Single-File HTML Report
Embed a logo, a chart image and a web font directly in one .html file so it can be emailed or archived and still render years later with no folder of assets beside it.
Identifying an Unlabelled Blob
Paste a Base64 string of unknown origin, decode it, and read the file type the tool inferred from the magic bytes to find out whether you are holding a PNG, a PDF or a ZIP-based Office document.