Data URI Generator

Convert text, HTML, CSS, JSON, SVG, or any file into a fully qualified Data URI (data URL) with base64 encoding.Preview your embedded resource instantly. Understand the syntax, performance impact, and security best practices.

Select the media type of your data.
Data URI format: data:[<mediatype>][;base64],<data>  —  All data is base64-encoded for broad compatibility.
For text-based content like HTML, CSS, JSON, or SVG. For binary files, use the File Upload tab.
HTML CSS JSON SVG Plain Text JavaScript
Privacy first: All encoding happens locally in your browser. No data is ever sent to a server. Your files and text remain on your device.

What Is a Data URI?

A Data URI (Uniform Resource Identifier) is a scheme that allows you to embed small files — images, stylesheets, scripts, HTML fragments, or any binary data — directly into a web page or document. Instead of referencing an external URL, the data is encoded as a string within the URI itself, following the format defined in RFC 2397:

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

mediatype optional MIME type base64 optional encoding flag data the actual content (base64 or percent-encoded)

The Data URI scheme was introduced in the late 1990s as a way to inline resources, reducing the number of HTTP requests and enabling self‑contained documents. Today, it is widely supported across all modern browsers and is a fundamental tool for front‑end developers.

How Data URI Encoding Works

When you encode a resource as a Data URI, the binary or text data is transformed using Base64 encoding — a method that converts binary data into an ASCII string using a 64‑character alphabet (A–Z, a–z, 0–9, +, /). Base64 increases the size of the data by approximately 33% (plus a small constant overhead), which is the primary trade‑off for the convenience of inlining.

For text‑based content (like HTML or CSS), you could alternatively use percent‑encoding, but Base64 is more compact and handles non‑ASCII characters gracefully. The browser automatically decodes the Base64 portion and interprets it according to the specified MIME type. If no MIME type is provided, the browser may attempt to guess it, but it is always best practice to include an explicit type.

The encoding process in this tool uses the browser's native TextEncoder API for text inputs and FileReader for file uploads, ensuring accurate and efficient conversion. All operations are performed client‑side, preserving your privacy.

When to Use Data URIs

  • Web Performance: Inline small images (< 5 KB) to reduce HTTP requests, especially for icons and sprites.
  • Self‑Contained Documents: Embed images directly into HTML email templates, Markdown files, or offline documentation.
  • CSS & SVG: Use Data URIs for background images or vector graphics to keep stylesheets portable.
  • API Responses: Return binary data (e.g., images or PDFs) as Base64 strings within JSON APIs.
  • Prototyping: Quickly embed resources during development without setting up a static file server.
  • Offline Applications: Bundle small assets into a single HTML file for offline use.
Case Study: Email Signature with Inline Logo

A marketing team wanted to include a company logo in every employee's email signature without relying on external image hosting (which could be blocked by email clients). By encoding the logo as a Data URI and embedding it directly in the HTML signature, they ensured consistent rendering across all major email clients — including Outlook, Gmail, and Apple Mail — while reducing dependency on external servers.

The Data URI approach also allowed them to version‑control the signature alongside their branding assets, making updates seamless and auditable.

Performance & Security Considerations

Performance Trade‑offs

While Data URIs reduce the number of network requests, they also increase the overall payload size due to Base64 overhead. For large files (e.g., > 20 KB), the performance benefit of reducing requests is often outweighed by the increased transfer size and parsing cost. Modern HTTP/2 and HTTP/3 protocols are highly efficient at multiplexing requests, making Data URIs less critical for performance than in the HTTP/1.1 era. However, for very small assets (under a few kilobytes), Data URIs remain a viable optimisation.

Security Risks

Data URIs can pose security risks if not handled carefully. In particular:

  • XSS via data:text/html: An attacker could craft a Data URI that executes arbitrary JavaScript when loaded in an iframe or via window.open(). Always validate and sanitise user‑supplied content before generating Data URIs.
  • Phishing: Data URIs can mimic legitimate URLs in browser address bars, potentially tricking users into trusting malicious content.
  • Content Sniffing: Browsers may sniff the content type if the MIME type is omitted or incorrect, leading to unexpected behaviour. Always specify the correct MIME type.

This tool applies best practices by requiring an explicit MIME type and encoding all data as Base64, mitigating common injection vectors.

Common Use Cases & Examples

Use Case MIME Type Example Data Data URI Preview
Embedded HTML snippet text/html <h1>Hello</h1> Renders as HTML
CSS background image image/png 1×1 pixel red dot Used in url()
JSON payload application/json {"key":"value"} Parsed as JSON
Inline SVG graphic image/svg+xml <circle r="10"/> Renders as vector
JavaScript module application/javascript console.log("hi") Executable script

Frequently Asked Questions

A regular URL points to a resource located on a server, requiring an HTTP request to fetch it. A Data URI embeds the resource directly within the URI itself. The browser decodes and renders the content without any network round‑trip. Data URIs are best for small, static resources.

Yes. Data URIs are supported in all modern browsers (Chrome, Firefox, Safari, Edge, Opera) and in most older browsers back to Internet Explorer 8 (with some limitations on maximum length). The specification (RFC 2397) has been widely implemented since the early 2000s.

There is no official maximum size defined in the specification. However, browsers typically impose a practical limit: Chrome limits Data URIs to about 2 MB, Firefox to about 1 MB, and Internet Explorer to about 32 KB. For larger files, it is better to use a traditional URL with a server. This tool enforces a 5 MB limit to ensure stability.

Absolutely. You can use a Data URI as the value of the url() function in CSS, e.g., background-image: url("data:image/png;base64,iVBORw0KGgo...");. This is a common technique for inlining small icons and sprites to reduce HTTP requests.

Base64 encoding increases the size of the data by approximately 33% because it uses 6 bits per character instead of 8. For example, a 1 MB file becomes about 1.33 MB when encoded. The overhead is constant for all data types, regardless of content.

Embedding user‑generated content as Data URIs can be risky, especially with text/html or image/svg+xml types, as they can execute scripts. Always sanitise and validate any user input before generating a Data URI. This tool is designed for trusted, self‑contained resources; for untrusted content, consider using a Content Security Policy (CSP) and server‑side validation.

Rooted in Web Standards – This tool adheres to the Data URI specification defined in RFC 2397 and follows modern web development best practices. The implementation uses native browser APIs (TextEncoder, FileReader, btoa) to ensure accuracy and performance. Reviewed by the GetZenQuery tech team, last updated June 2026. For deeper reading, refer to the MDN Data URI documentation and the W3C reference.

References: RFC 2397 • MDN Web Docs • W3C HTML Reference • Wikipedia: Data URI scheme