Is my file uploaded when I encode it?

No. The file is read locally by your browser through the FileReader API and never leaves the tab. That is also why there is no API endpoint for this tool.

How large can the file be?

Bounded by browser memory rather than a fixed limit, but files beyond a few megabytes produce strings that are impractical to use and slow to render.

When should I use a data URI instead of a file?

For assets under roughly 4 KB where removing a request matters — small icons, a critical inline font. Larger assets benefit more from independent caching.

Why does my data URI not display the image?

Usually a wrong or missing MIME type, or a Content-Security-Policy that blocks data: URIs in img-src. Check both before suspecting the encoding.

Developer🔒 Browser (client-side)API: browser-only📴 Works offlinebeginner

Base64 File

Encodes a local file to Base64, or decodes Base64 into a file, entirely in your browser.

Data stays in your browser

Ready to runInstant execution

All tools →

Encode file → Base64

Decode Base64 → file

What does this tool do?

Encodes a local file to Base64, or decodes Base64 into a file, entirely in your browser.

Why would I use it?

You need to embed a small file (image, PDF) in an email or config.
You want to inspect what a Base64 blob decodes to.
You want the operation done privately — the file never uploads.

Real-life example

Input

A 10 KB PNG file

Output

iVBORw0KGgo... (Base64 text)

Base64 grows the file by ~33%.

Input → Process → Output → Next

Input: Pick a file (≤ 5 MB) or paste Base64.
Process: The browser reads the file and encodes it in chunks.
Output: Base64 text, or a downloadable decoded file.
Next action: Copy the Base64 or download the decoded file.

Common mistakes

Uploading huge files (kept to 5 MB in-browser).
Expecting size to stay the same — Base64 is larger.
Using it to 'protect' a file — it is encoding, not encryption.

What the result means

Output size ≈ input size × 4/3, rounded up.

Privacy & security

Your input is processed entirely in your browser and never sent to a YAS server.

API automation is not supported for this tool. Requires the browser File API — files are processed locally and never uploaded. This tool intentionally cannot be executed through the YAS API (server-side).

API

No public API for this tool

This tool runs in your browser and cannot be executed through the YAS API. Requires the browser File API — files are processed locally and never uploaded.

How Base64 File works

The file is read as raw bytes through the FileReader API and encoded directly, without a text-decoding step. That distinction is what separates this from the text tool: interpreting a PNG or a PDF as UTF-8 first would corrupt it, because arbitrary byte sequences are not valid text in any encoding. Encoding operates on the exact bytes on disk.

The practical output is usually a data URI: data:<mime-type>;base64,<payload>. The MIME type is taken from the file and matters — a browser renders data:image/png differently from data:application/octet-stream, and an incorrect type can cause the content to download rather than display, or be refused outright by a strict Content-Security-Policy.

When to use it: real-world scenarios

Embedding a small icon or font in CSS

A data URI removes a request. Worth it below roughly 4 KB; beyond that a separate cacheable file wins because the inlined copy is re-downloaded with every stylesheet.

Attaching a file to a JSON API request

Endpoints that accept documents as a JSON string field need the file Base64-encoded, since JSON strings cannot carry raw bytes.

Embedding an image in an email template

Some clients accept data URIs, though many block them — test before relying on it, and keep a hosted fallback.

Moving a small binary through a text-only channel

Chat, YAML config, environment variables and shell scripts all need bytes represented as text.

Pro tips

Set the MIME type correctly in the data URI. An image served as application/octet-stream downloads instead of rendering.
Remember the 33% size increase, and that inlined assets cannot be cached separately from the document that contains them.
Data URIs are frequently blocked by Content-Security-Policy. Check your policy before designing around them.
Encoding happens locally in your browser here — but a file you Base64 into a config or a commit is stored in plain text forever, which is a poor place for anything sensitive.

Limitations and edge cases

What this tool deliberately does not do, and where it will disagree with other implementations.

Practical size is limited by browser memory; large files will hang the tab and produce a string no editor handles comfortably.
No server API — encoding a file server-side would require uploading it, which is exactly what this tool avoids.
Data URIs cannot be cached independently and are re-transferred with every copy of the containing document.
Some email clients and CSP configurations reject data URIs outright.

Frequently asked questions

Is my file uploaded when I encode it?: No. The file is read locally by your browser through the FileReader API and never leaves the tab. That is also why there is no API endpoint for this tool.
How large can the file be?: Bounded by browser memory rather than a fixed limit, but files beyond a few megabytes produce strings that are impractical to use and slow to render.
When should I use a data URI instead of a file?: For assets under roughly 4 KB where removing a request matters — small icons, a critical inline font. Larger assets benefit more from independent caching.
Why does my data URI not display the image?: Usually a wrong or missing MIME type, or a Content-Security-Policy that blocks data: URIs in img-src. Check both before suspecting the encoding.

Related tools

Base64 Text Base64 URL Encode