🔗 Data URI Generator – Encode Any File as an Inline Resource
A Data URI (also called a data URL) is a compact string that embeds file content directly inside HTML, CSS, or JavaScript — no separate HTTP request required. This tool converts any file or raw text into a valid RFC 2397 Data URI and can also decode existing Data URIs back to their original files.
📐 The Data URI Format
Every Data URI follows the same structure defined in RFC 2397:
data:[<mediatype>][;base64],<data>| Segment | Description | Example |
|---|---|---|
data: | Scheme — always present | data: |
mediatype | MIME type of the content | image/png |
;base64 | Encoding flag — omitted for URL encoding | ;base64 |
,data | The encoded file content | ,iVBORw0KGgo… |
⚖️ Base64 vs URL Encoding — Which Should You Use?
The tool supports two encoding strategies. Choosing the right one affects the final URI size:
| Encoding | Best for | Size overhead | Example MIME |
|---|---|---|---|
| Base64 | Binary files — images, fonts, audio | ~33% larger than original | image/png, font/woff2 |
| URL encoded | Text files — SVG, HTML, CSS | Varies; often 2–20% smaller than Base64 | image/svg+xml, text/css |
The Base64 overhead formula is: encodedBytes = ⌈originalBytes / 3⌉ × 4. This means every 3 bytes of binary data become 4 ASCII characters — a constant 33.3% increase. For an SVG file, URL-encoding often produces a shorter result because most SVG characters (letters, digits, angle brackets) encode as themselves or with minimal escaping.
🎁 Output Wrappers
Once encoded, you can wrap the raw URI in a ready-to-paste code snippet:
- Raw Data URI — the plain
data:…string for use anywhere - <img> tag — an inline image for HTML documents
- CSS background-image — a complete
url()declaration for stylesheets - CSS content — for pseudo-element image injection
- <link> tag — for inline stylesheets or icons
- <script> tag — for inline JavaScript modules
- <object> tag — for PDFs or other embedded objects
🔍 Data URI Decoder
Switch to the Decode tab to reverse the process. Paste any Data URI starting with data: and the tool will:
- Detect the MIME type from the metadata segment
- Identify whether Base64 or URL encoding was used
- Display the decoded size and a live preview for images and SVGs
- Let you download the original binary or copy the decoded text
📏 When to Use (and Avoid) Data URIs
Data URIs are best suited for small, frequently-used assets such as tiny icons, loading spinners, or bullet-point SVGs. Inlining them eliminates the HTTP round-trip cost for that resource. However, they come with trade-offs:
- No browser caching — the data is re-parsed every time the parent document is loaded
- Larger document size — Base64 encoding increases the file size by ~33%
- Not suitable for large files — browsers may throttle or refuse to render Data URIs over ~2 MB
- Email templates — inline images are ideal since many email clients block external image requests
As a practical guideline, keep individual Data URIs under 10 KB for CSS backgrounds and under 1 MB for HTML images. For larger assets, use a CDN or external URL instead.
🔒 Privacy & Security
All encoding and decoding is performed entirely in your browser using native Web APIs (FileReader, btoa(), atob(), encodeURIComponent()). No file content is sent to any server — your data stays on your device at all times.