File to Data URI
Convert any file to a copy-ready Base64 or data URI string for embedding in HTML, CSS, APIs, and JSON payloads.
Updated
Drop any file here, or click to browse
Upload any file up to 10 MB to encode it as Base64 or data URI.
Max file size: 10.00 MB
All encoding happens in your browser. Files are never uploaded to any server.
How to use File to Data URI
The File to Data URI tool converts any local file — image, PDF, audio, font, binary, or plain text — to a standards-compliant base64 data URI string instantly, right in your browser. Upload the file and get three ready-to-use outputs: standard Base64, URL-safe Base64, and the full RFC 2397 data URI. All encoding runs locally using the Web File API so your files never leave your device. Copy any output with one click or download a .txt bundle containing all three.
- Click or drag any file onto the upload zone — any file type up to 10 MB is accepted.
- Choose an optional line-wrap width (76 or 64 characters) for compatibility with MIME-encoded mail or PEM headers.
- Switch between the Base64, URL-safe, and Data URI output tabs to copy the format you need.
- Click the copy button next to the active tab to copy to clipboard.
- Click "Download .txt bundle" to save all three output formats in a single text file.
Your data never leaves your device — 100% private processing.
When to use Base64 vs URL-safe Base64 vs data URI
Each output format is optimised for a different target context. Standard Base64 (RFC 4648 §4) uses + and / and is correct for MIME email attachments, HTTP headers, and PEM certificate files. URL-safe Base64 (RFC 4648 §5) replaces + with - and / with _ and drops = padding, making the string embeddable in a URL path or query parameter without percent-encoding — it is the required format inside JSON Web Token (JWT) header and payload segments. The full data URI (RFC 2397) prepends data:<mimeType>;base64, to the standard base64 string, turning the payload into a complete self-contained URL that browsers can open directly, embed in an HTML <img src> attribute, a CSS background-image, or a <link href> for fonts.
| Format | Alphabet | Use case |
|---|---|---|
| Standard Base64 | A–Z a–z 0–9 + / = | MIME email, HTTP Basic Auth, PEM, XML |
| URL-safe Base64 | A–Z a–z 0–9 - _ | JWTs, URL params, filenames, REST APIs |
| Data URI | data:<mime>;base64,<std-b64> | HTML src, CSS url(), inline file transfer |
Performance and size considerations
Base64 encoding inflates every 3 bytes of binary data into 4 ASCII characters — a 33 % overhead. For context, a 100 KB PNG file becomes a ~133 KB base64 string and a ~147 KB data URI (the prefix adds a few more characters). This is acceptable for small assets like icons and inline thumbnails, but embedding large files as data URIs harms page-load performance because the browser must parse the base64 string before it can render the content, blocking later resources. A good rule of thumb is to limit inline data URIs to assets under 10 KB in production. For larger files, serve them via a CDN URL or a signed S3 link and use this tool for development, testing, and one-off API payloads.
Worked examples
Encode a PNG logo as data URI
Inputs: 150 KB PNG file
Result: data:image/png;base64,iVBORw0KGgo... (200 KB, no-wrap)
Encode a WOFF2 font for CSS
Inputs: 12 KB font.woff2 file
Result: data:font/woff2;base64,d09GRgABAAA... (16 KB, 76-char wrap)
Glossary
- RFC 2397
- The IETF standard that defines the data URI scheme — how MIME type, optional charset, and base64 flag are combined with the encoded payload.
- RFC 4648
- The IETF standard that defines both standard Base64 (§4) and URL-safe Base64 (§5) alphabets and padding rules.
- MIME type
- A content-type identifier like image/png or application/json that tells the receiver how to interpret the bytes.
- Padding
- The = characters appended to make a base64 string a multiple of 4 characters. URL-safe base64 omits them because the length can be inferred.
- PEM
- Privacy-Enhanced Mail format for cryptographic keys and certificates — it wraps standard base64 in -----BEGIN ... ----- / -----END ... ----- headers.
Related reading
Frequently Asked Questions
Get weekly tool tips & updates
New tools, power-user tips, and productivity hacks — delivered free every Friday.
No spam, ever. Unsubscribe with one click.
Why use File to Data URI?
- Three output formats in one step: standard Base64, URL-safe Base64, and full data URI
- Download a .txt bundle with all three formats for offline reference or sharing
- Optional line-wrap (64 or 76 chars) for MIME email and PEM certificate compatibility
- Works with any file type — images, PDFs, audio, fonts, binaries, and plain text up to 10 MB
Common use cases
- Embed a small logo or icon as a data URI directly in CSS or an HTML email template
- Generate a base64-encoded JWT secret or PEM certificate payload from a local key file
- Encode an API attachment as a data URI to paste into a Postman or Insomnia request body
- Convert a WOFF2 font file to a data URI for embedding in an offline-capable CSS stylesheet
Related Developer Tools
Data URI to File
Paste any data URI and instantly decode it to a downloadable file. Supports all MIME types — images, PDFs, audio, JSON, and more. Runs entirely in your browser.
Base64 Encoder & Decoder
Encode text or files to Base64, or decode Base64 strings back to text. Fast, free, and runs entirely in your browser.
PDF to Base64
Upload a PDF and get raw Base64 or data URI output instantly. Includes copy-ready output, line-wrap options, and in-browser privacy-safe processing.
JSON Formatter & Validator
Format, validate, and minify JSON instantly. Includes syntax highlighting, error detection, and a collapsible tree view — free, private, in-browser.
Regex Tester
Test and debug regular expressions online. See live matches, capture groups, and replace output. Free, private, instant.
URL Encoder / Decoder
Encode and decode URLs and URL components online. Convert special characters to percent-encoding and back instantly — free, private, and fast.
Explore all Developer Tools.