Data URI Encoder / Decoder

Encode text or files to Data URI format and decode Data URIs back to their original content.

Home
> Encoder & Decoder >
Data URI Encoder / Decoder

Encode to Data URI

Text or File Content:

MIME Type:

Base64 encode (uncheck for percent-encoding)

Data URI Result:

Decode Data URI

Data URI:

Parsed Info:

Decoded Content:

What is a Data URI?

A Data URI (Uniform Resource Identifier) is a scheme defined in RFC 2397 that allows embedding data directly into a URI string rather than referencing an external file. The format is: data:[<mediatype>][;base64],<data>

Data URIs are commonly used in web development to inline small resources like images, fonts, and CSS files directly into HTML or CSS, reducing HTTP requests and improving page load speed.

Data URI Format

Without base64: data:text/plain,Hello%20World — data is percent-encoded
With base64: data:image/png;base64,iVBORw0KGgo... — data is base64-encoded
Default MIME type: data:,Hello%20World — defaults to text/plain;charset=US-ASCII

How to Use This Data URI Encoder/Decoder

Encode — Enter text or content in the left panel, select the appropriate MIME type, choose encoding (base64 or percent), then click Encode.
Decode — Paste a Data URI in the right panel, then click Decode to see the parsed MIME type, encoding, and decoded content.
Custom MIME — Select "Custom..." from the MIME Type dropdown to enter any MIME type manually.
Swap & Clear — Click Swap to exchange encode/decode values, Clear All to reset everything.

Common Use Cases

Inline images in CSS — Embed small icons or background images directly in CSS using background-image: url(data:image/...).
Self-contained HTML — Create single-file HTML documents with embedded images, fonts, and stylesheets for offline sharing.
Email signatures — Embed images directly in HTML email signatures without external hosting.
SVG sprites — Inline SVG icons as data URIs for single-file icon systems without network requests.
Web font optimization — Embed critical font files as data URIs in CSS to eliminate font loading delays.

Frequently Asked Questions

What is the size limit for Data URIs?

Data URIs have no formal size limit, but practical limits exist. In most browsers, URLs are limited to about 32KB-2MB depending on the context. For large resources, it's better to use external files. This tool works best for small to medium-sized resources.

Should I use base64 or percent-encoding?

Base64 is more space-efficient for binary data (33% overhead vs 200%+ for percent-encoding). Percent-encoding is better for text content that is mostly ASCII, as it remains somewhat readable. Use base64 for images, fonts, and binary files; use percent-encoding for small text snippets.

Are Data URIs cached by the browser?

No. Data URIs are part of the parent resource (HTML or CSS) and are cached only when the parent resource is cached. Unlike external resources, they cannot be cached independently or shared across documents.

What happens if my data URI has a charset parameter?

This tool correctly handles charset parameters in the MIME type (e.g., text/plain;charset=UTF-8). The charset is preserved in the parsed info display.

Is this tool safe for sensitive data?

Yes. All encoding and decoding happens entirely in your browser using JavaScript. No data is sent to any server. Your content never leaves your device.