Convert any file to a Base64 data URL, or decode a data URL back to a downloadable file โ all in your browser, no server, completely private.
๐
Drag & drop any file here, or click to browse
Images, SVG, fonts, JSON, PDF, audio, video โ any file typeFile name
โ
MIME type
โ
Original size
โ
Encoded size
โ
Size increase
โ
<div id="du-preview-wrap">
<img id="du-preview-img" src="" alt="Preview">
<div id="du-preview-label">Image preview</div>
</div>
<div class="du-output-block">
<div class="du-output-header">
<span class="du-output-title">Data URL (data:mime;base64,...)</span>
<button class="du-copy-btn" data-target="du-out-dataurl">Copy</button>
</div>
<textarea id="du-out-dataurl" readonly spellcheck="false" placeholder="Data URL will appear here..."></textarea>
</div>
<div class="du-output-block">
<div class="du-output-header">
<span class="du-output-title">Base64 string only</span>
<button class="du-copy-btn" data-target="du-out-b64">Copy</button>
</div>
<textarea id="du-out-b64" readonly spellcheck="false" placeholder="Base64 string will appear here..."></textarea>
</div>
<div class="du-output-block">
<div class="du-output-header">
<span class="du-output-title">CSS background-image</span>
<button class="du-copy-btn" data-target="du-out-css">Copy</button>
</div>
<textarea id="du-out-css" readonly spellcheck="false" rows="2"></textarea>
</div>
<div class="du-output-block" id="du-img-src-block" style="display:none">
<div class="du-output-header">
<span class="du-output-title">HTML <img> src</span>
<button class="du-copy-btn" data-target="du-out-html">Copy</button>
</div>
<textarea id="du-out-html" readonly spellcheck="false" rows="2"></textarea>
</div>
<div class="du-output-block" id="du-font-block" style="display:none">
<div class="du-output-header">
<span class="du-output-title">CSS @font-face src</span>
<button class="du-copy-btn" data-target="du-out-font">Copy</button>
</div>
<textarea id="du-out-font" readonly spellcheck="false" rows="3"></textarea>
</div>
<div id="du-enc-actions">
<button class="du-btn-secondary" id="du-reset-btn">Convert another file</button>
</div>
Common use cases
- CSS background-image
- HTML img src
- Font embedding (@font-face)
- SVG embedding
- Email templates
- JSON / API payloads
- Offline web apps
- Favicon embedding
How to use
File to Data URL
- Drag and drop any file onto the upload zone, or click to open the file picker.
- The tool reads the file using the browser FileReader API โ nothing is sent to any server.
- Copy the output format you need: full data URL, bare Base64, CSS
background-image, HTML<img>tag, or CSS@font-face(for font files).
Data URL to File
- Switch to the Data URL โ File tab.
- Paste your
data:mime;base64,...string (or a bare Base64 string). - Click Decode & Download to save the original file.
Output formats
| Format | When to use |
|---|---|
| Data URL | Direct value for src, href, or url() |
| Base64 string | APIs, databases, JSON payloads |
| CSS background-image | Paste straight into a stylesheet |
HTML <img> tag | Paste straight into HTML |
| CSS @font-face | Embed a web font without external requests |
Why use data URLs?
Embedding a file as a Base64 data URI lets you ship a self-contained HTML file, email template, or CSS stylesheet with no external HTTP requests. Common scenarios:
- SVG icons in CSS โ no extra network round-trip
- Fonts in email โ some clients block external resources
- Offline web apps โ embed assets directly in the app shell
- API payloads โ pass binary data as JSON strings
- Favicon embedding โ inline tiny icons without a separate file
The trade-off is roughly a ~33% size increase (every 3 bytes become 4 Base64 characters). Keep embedded assets small โ under ~50 KB is a good rule of thumb for production use.
Privacy
All conversion happens entirely in your browser using the FileReader and atob/btoa APIs. No file data is ever sent to a server.
Related tools: Base64 Encoder / Decoder ยท Image to Base64 ยท Base64 to Image