Data URI Generator: Create data: URLs from Files

Data URI Generator

A data URI embeds file content directly in an HTML attribute or CSS property, replacing an external URL with the file data itself. This tool generates data URIs from any file by reading it locally, detecting its MIME type, and encoding the content as Base64. For all Base64 tools and reference material, visit the Base64 Hub.

How to Use

1. Drop a file onto the upload area or click to browse
2. The tool detects the MIME type and encodes the file
3. The “Data URI” output format is selected by default
4. Copy the complete data URI

Data URI Syntax

Every data URI follows this structure:

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

• mediatype: The MIME type (e.g., image/png, application/pdf, audio/mpeg). Defaults to text/plain;charset=US-ASCII if omitted.
• ;base64: Indicates the data is Base64 encoded. Without this, the data is URL encoded text.
• data: The actual content, either Base64 encoded (for binary) or URL encoded (for text).

Examples:

data:image/png;base64,iVBORw0KGgoAAAANSU...
data:text/html,%3Chtml%3E%3Cbody%3EHello%3C/body%3E%3C/html%3E
data:text/plain;charset=utf-8,Hello%20World

Where Data URIs Work

HTML img tags

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

CSS backgrounds

.icon {
  background-image: url(data:image/svg+xml;base64,PHN2Zy...);
}

HTML anchor downloads

<a href="data:application/pdf;base64,JVBERi..." download="document.pdf">
  Download PDF
</a>

Favicons

<link rel="icon" href="data:image/svg+xml;base64,PHN2Zy..." />

Iframes

<iframe src="data:text/html;base64,PCFET0NUWVBF..." width="100%" height="400"></iframe>

JavaScript

const audio = new Audio('data:audio/mpeg;base64,SUQz...');
const img = new Image();
img.src = 'data:image/png;base64,iVBOR...';

Data URIs vs. External URLs

Content Security Policy

Content Security Policy (CSP) can restrict data URIs. A strict CSP without data: in the source list blocks data URIs:

Content-Security-Policy: img-src 'self';  /* blocks data: images */
Content-Security-Policy: img-src 'self' data:;  /* allows data: images */

If your application uses CSP, ensure the relevant directives (img-src, font-src, media-src, style-src) include data: if you use data URIs. Be aware that allowing data: in script-src is generally considered unsafe, as it enables inline script injection.

RFC 2397 and History

Data URIs were standardized in RFC 2397 (1998). The scheme was designed for including small data items inline in web documents, avoiding the overhead of separate HTTP transactions. Despite being nearly 30 years old, the specification remains unchanged and universally supported.

Practical Size Guidelines

Above these thresholds, separate files with HTTP caching deliver better overall performance.

For specific file types, see Image to Base64, PDF to Base64, Audio to Base64, or the CSS Background Image generator.