{ Data URI Generator }

// convert files & text to embeddable data URIs

Convert text, SVG, images, or any small file into a Base64 data URI for embedding directly in HTML, CSS, or JavaScript. Free, browser-based, instant.

INPUT TEXT / SVG / CODE

MIME TYPE

CHARSET

🔗

Ready to encode

Paste text/SVG or upload a file and click Generate

HOW TO USE

01
Choose mode
Select "Text / SVG" to paste code, or "File Upload" to drag and drop a file.
02
Set MIME type
Pick the correct MIME type for your content, or let it auto-detect from the file extension.
03
Generate & copy
Click Generate, then copy the data URI or select a ready-made snippet for HTML/CSS use.

FEATURES

Text & SVG File Upload Auto MIME Image Preview HTML Snippets CSS Snippets

USE CASES

🔧 Inline SVG icons directly in CSS
🔧 Embed small images without HTTP requests
🔧 Encode web fonts for self-contained CSS
🔧 Bundle JSON/config in HTML data attributes

WHAT IS THIS?

A data URI (Uniform Resource Identifier) lets you embed file content directly inside HTML, CSS, or JavaScript as a Base64-encoded string. Instead of referencing an external file, the content travels inline with your code — eliminating an HTTP request and making assets self-contained.

RELATED TOOLS

FREQUENTLY ASKED QUESTIONS

What is a data URI?

A data URI is a URL scheme that encodes file content directly into the URI string using Base64. It starts with data:, followed by the MIME type, optional charset, the ;base64, marker, and then the encoded data.

When should I use data URIs?

Data URIs work best for small assets (icons, tiny images, fonts) where eliminating an HTTP round-trip matters more than the ~33% size overhead of Base64 encoding. Avoid them for large files — they inflate your HTML/CSS size and can't be cached separately by the browser.

What file types are supported?

Any file up to 2 MB — images (SVG, PNG, JPG, GIF, WebP), fonts (WOFF, WOFF2, TTF, OTF), stylesheets, scripts, JSON, XML, plain text, and more. The tool auto-detects the MIME type from the file extension.

Is my data sent to a server?

File encoding happens entirely in your browser via the JavaScript FileReader API. Your files never leave your machine. The text/SVG mode uses a lightweight PHP endpoint, but no data is stored or logged.

How do I use a data URI in CSS?

Use it as a background-image value: background-image: url("data:image/svg+xml;base64,...");. The CSS Snippet tab generates this for you automatically.

Can I embed SVG without Base64?

Yes — SVG can technically be URL-encoded instead of Base64-encoded, but Base64 is more universally supported and easier to handle. This tool always outputs Base64 for maximum compatibility.

Why does my output look so large?

Base64 encoding increases file size by approximately 33%. This is the trade-off for inline embedding. Compress or optimize your file first (e.g. with our SVG Optimizer or Image Compressor) to keep the output manageable.

What is the MIME type field for?

The MIME type tells the browser how to interpret the embedded data — whether it's an image, a stylesheet, a font, etc. Choosing the wrong MIME type will cause the browser to ignore or misrender the content.

What is a Data URI Generator?

A Data URI Generator is a developer tool that converts files, text, SVG markup, and other assets into Base64-encoded data URIs — self-contained strings you can embed directly inside HTML attributes, CSS properties, or JavaScript code. Instead of referencing an image or font via an external URL, you paste the entire encoded file inline, removing the dependency on an external HTTP request entirely.

This tool supports both text-based input (SVG, CSS, plain text, JSON, HTML) and binary file uploads (PNG, JPG, WebP, WOFF, TTF, and more), auto-detects the correct MIME type, and generates ready-to-paste code snippets for the most common embedding scenarios.

💡 Looking for premium web development assets? MonsterONE offers unlimited downloads of HTML templates, UI kits, and front-end assets — worth checking out for your next project.

How Data URIs Work

The data URI scheme is defined in RFC 2397 and follows this structure:

data:[<mediatype>][;charset=<charset>][;base64],<data>

mediatype — the MIME type of the content, e.g. image/png or image/svg+xml
charset — optional for text content; specifies the character encoding
;base64 — indicates that the following data is Base64-encoded
data — the actual encoded content

When a browser encounters a data URI, it decodes the Base64 string back to binary and renders it as if it had fetched the file from a server. The difference: no network round-trip, no separate cache entry, no external dependency.

When to Use Data URIs

Data URIs shine in specific scenarios. Here's when they make sense:

Tiny icons and logos — Small SVGs under 5 KB cost very little after Base64 encoding and eliminate one HTTP request. Ideal for favicons, UI icons, and loading spinners embedded directly in CSS.
Single-file HTML deployments — Embedding all assets inline creates truly portable HTML files that work offline and require no server. Useful for email templates, generated reports, and offline documentation.
Web font fallbacks — Embedding a subset of a WOFF2 font directly in your CSS guarantees zero flash-of-invisible-text (FOIT) for critical characters.
CSS background patterns — Repeating SVG patterns and textures used as CSS backgrounds are commonly inlined to avoid async loading issues during page paint.
Avoiding CORS issues — When you need to use a canvas-based operation on an image, embedding it as a data URI bypasses same-origin restrictions.

When NOT to Use Data URIs

Despite their usefulness, data URIs have real downsides:

Large files — Base64 encoding adds ~33% overhead. A 100 KB image becomes ~133 KB in your HTML or CSS. This inflates the main document size and can block the critical rendering path.
No separate caching — External resources are cached by the browser independently and reused across pages. Inline data URIs are re-parsed on every page load that contains them.
Poor gzip performance — Base64-encoded strings compress poorly compared to binary data, further limiting their efficiency for large assets.
Readability — Long data URIs make source code difficult to read and diff. Reserve them for generated or minified output, not hand-authored files.

SVG Data URIs: A Special Case

SVG is a text format, which means it can technically be embedded as a URL-encoded string rather than Base64. However, Base64 SVG data URIs are more universally supported across browsers and tools, and this generator always outputs Base64 for consistency. For optimal SVG performance, run your SVG through an optimizer first to strip unnecessary metadata, comments, and whitespace before encoding.

Using Data URIs in HTML and CSS

Once you have your data URI, embedding it is straightforward. In HTML, use it as the src attribute of an <img> tag:

<img src="data:image/png;base64,iVBORw0KGgoAAAANS..." alt="Icon">

In CSS, use it as the value of a background-image:

.icon {
  background-image: url("data:image/svg+xml;base64,PHN2Zy4uLg==");
  background-size: contain;
}

For fonts, use it inside a @font-face rule:

@font-face {
  font-family: 'MyFont';
  src: url("data:font/woff2;base64,d09GMgAB...") format('woff2');
}

This tool generates all three snippet types automatically — just switch the tab after encoding your file.

Data URIs vs. Blob URLs

An alternative to data URIs for JavaScript-based workflows is the Blob URL (URL.createObjectURL()). Blob URLs are shorter (they're just a reference to an in-memory object) and can represent any file size without the Base64 overhead. However, they are session-only — they expire when the page is closed, making them unsuitable for persistent storage in HTML or CSS. Data URIs are the right choice when you need a string you can save, copy, and paste into source code.

File Size Limits and Browser Support

Most modern browsers support data URIs of arbitrary length, though older versions of Internet Explorer had a 32 KB limit. As a practical guideline, keep data URIs under 32 KB to ensure broad compatibility and performance. This generator enforces a 2 MB file upload limit, which outputs a ~2.7 MB data URI — well above what you'd typically want to inline, but useful for testing and edge cases.

☕