Base64 Files
Free · Browser-Side · No Upload

File to Base64

Convert any file to Base64, Data URL, HTML, CSS, JSON, or API payload format — directly in your browser. No upload required. Your file stays on your device.

File to Base64

Drop a file, choose an output format, copy the result.

1UPLOAD FILE

Drop a file here

or click to browse files

Supports images, PDFs, SVGs, fonts, documents and more

Recommended under 10 MB

Files are processed locally in your browser and never uploaded

2OUTPUT SETTINGS
Include MIME Type
Prepends the data: prefix to the output
Wrap Lines (76 chars)
Splits Base64 into 76-character lines
Include Filename Comment
Adds the filename in JSON / API output
// Output will appear here after uploading a file
Format:Data URLCharacters:0Lines:1Local encoding, never uploaded

Have Base64 to decode back to a file?

Decode a Base64 string or Data URL back to the original file, with image preview and direct download.

Base64 to File

How to Convert a File to Base64

1

Upload a File

Click the upload area or drag and drop any file — images, PDFs, fonts, SVGs, documents, and more.

2

Choose an Output Format

Select raw Base64, Data URL, HTML embed, CSS background, JSON payload, or API-ready format.

3

Copy or Download

Click Copy to send the result to your clipboard, or download a .txt file for large outputs.

File to Base64 Examples

How to use Base64-encoded files in common web development scenarios.

HTML <img>html
<img
  src="data:image/png;base64,iVBORw0KGgoAAAANSUh..."
  alt="logo"
/>
CSS backgroundcss
.hero {
  background-image: url("data:image/png;base64,iVBOR...");
}
JSON payloadjson
{
  "filename": "logo.png",
  "mime": "image/png",
  "encoding": "base64",
  "data": "iVBORw0KGgoAAAANSUhEUgAA..."
}
API fetchjs
fetch('/api/upload', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    filename: 'logo.png',
    data: 'iVBORw0KGgoAAAANSUhEUgAA...',
  }),
})

When Should You Use Base64 Files?

Base64 isn't always the right choice — here are the scenarios where it genuinely makes sense.

Inline Images in HTML and CSS

Embed images directly in HTML or CSS without a separate file request — ideal for above-the-fold critical images or self-contained email HTML.

API File Transfer

Send files as Base64 strings in JSON request bodies over REST or GraphQL APIs, without needing multipart/form-data encoding.

Email Attachments and Inline Images

MIME email formats use Base64 for attachments and inline images. Build email templates with all assets already embedded.

Self-Contained HTML Files

Create single HTML files with all assets embedded as Base64 — great for offline documents, exports, or snapshots.

Frequently Asked Questions

Is this tool safe to use?

Yes. All conversion happens entirely in your browser using the Web File API. Your file is never sent to any server. You can disconnect from the internet and the tool will still work.

Which file types are supported?

Any file the browser File API can read: images (PNG, JPEG, GIF, WebP, SVG), PDFs, fonts (WOFF, WOFF2, TTF), audio, video, and any binary file — no type restrictions.

Why is the Base64 output larger than the original file?

Base64 encodes every 3 bytes as 4 ASCII characters, making the output roughly 33% larger than the original. This is the inherent overhead of representing binary data as plain text.

What is the difference between raw Base64 and a Data URL?

Raw Base64 is just the encoded string. A Data URL prepends the MIME type — for example data:image/png;base64, — making it usable directly as a browser src attribute or CSS url() value.

Is there a file size limit?

No hard limit, but files over 10 MB produce very large output that may be slow to copy. For large files, use the Download .txt button instead of the clipboard.

Can I decode Base64 back to a file?

Yes — use the Base64 to File tool. Paste any valid Base64 string, select the target MIME type, and download the reconstructed file.