Data URI Generator: Embed Files Inline as Base64

What Are Data URIs?

A data URI (Uniform Resource Identifier) is a scheme that allows you to embed file content directly in a URL string instead of linking to an external file. Defined by RFC 2397, data URIs encode the content inline using the format data:[mediatype][;base64],data. This eliminates the need for a separate HTTP request to fetch the resource.

Data URIs are commonly used for embedding small images, fonts, SVGs, and other assets directly into HTML or CSS. Instead of referencing an external file with a URL, the entire file content is encoded (typically in base64) and placed inline. This can reduce HTTP requests and simplify deployment for small assets.

How to Create Data URIs

A data URI generator converts file content or text into the data URI format. The process involves identifying the MIME type and encoding the content.

• Text input — enter text directly and specify the MIME type (text/plain, text/html, text/css, application/json). Text can be URL-encoded or base64-encoded
• File upload — upload any file (images, fonts, SVGs, documents) and the generator determines the MIME type automatically and base64-encodes the content
• MIME type selection — the media type tells the browser how to interpret the data. Common types include image/png, image/svg+xml, text/css, and application/javascript

When to Use Data URIs

Data URIs are most beneficial for small, frequently used assets where eliminating an HTTP request improves performance.

• CSS background images — embed small icons or patterns directly in CSS to avoid extra requests. Ideal for images under 2-4 KB that appear on every page
• Inline SVGs in CSS — embed SVG icons as data URIs in background-image properties when the SVG cannot be placed directly in HTML
• Email HTML templates — embed images directly in email HTML because many email clients block external images by default. Data URIs display without requiring the user to enable image loading

Frequently Asked Questions

Is there a size limit for data URIs?

There is no hard limit in the specification, but practical limits exist. Most modern browsers handle data URIs up to several megabytes, but Internet Explorer (legacy) limited them to 32 KB. Base64 encoding increases the data size by approximately 33%, so a 30 KB image becomes about 40 KB as a data URI. For assets larger than 5-10 KB, external files with proper caching are usually more efficient.

Do data URIs affect performance?

For small assets, data URIs improve performance by eliminating HTTP requests. However, base64-encoded data is about 33% larger than the original file, and data URIs cannot be cached independently by the browser (they are cached with the containing document). For large files or assets used across multiple pages, external files with cache headers perform better.

Are data URIs secure?

Data URIs have security implications. Most browsers block JavaScript execution in data URIs (preventing data: protocol XSS attacks). However, data URIs can bypass Content Security Policy (CSP) rules if not configured correctly. When accepting user-generated data URIs, always validate the MIME type and consider CSP directives that restrict data: sources.