Converter · SOTA RFC 2397 + SVG inline + CSS escape

Data URI Builder (Inline Assets)

Build data: URIs (RFC 2397) for inline images, SVGs, fonts, and CSS assets. Base64 or percent-encoded, size budget indicator, and ready-to-paste CSS, HTML, and JS snippets.

Text / SVG File (image/font)

Content MIME type

Encoding:

Data URI

Ready snippets

Preview

How to Use Data URI Builder in 3 Steps

Configure. Drop a file or paste text/SVG markup. Auto-detects MIME type; for files without extension, pick from the dropdown.
Process. Choose encoding: base64 (universal, works for any binary) or percent-encoded (smaller for SVG and plain text).
Export. Copy the data: URI or paste-ready snippet: CSS background-image, HTML src, JS import. Size-budget indicator warns if the payload exceeds ~8 KB (HTTP/2 push often better above that).

Why Data URI Builder on Pixlane

Data URIs embed small binary assets directly in HTML, CSS, or JavaScript — eliminating extra HTTP requests for tiny icons, SVG sprites, or inline fonts. Pixlane converts files or text to RFC 2397 data: URIs with both base64 and URL-encoded variants, shows size comparison (base64 is ~33% larger than the source; percent-encoding varies for text), and generates ready-to-paste CSS/HTML/JS snippets.

RFC 2397 Compliant — Official data: URI scheme with proper MIME type, charset, and encoding indicators. Correctly escapes commas and special chars.
Base64 + Percent — Base64 for any binary (images, fonts); percent-encoding for SVG and small text (often 15-30% smaller). Pick what fits your use case.
Size Budget Indicator — Warns when URI exceeds 4 KB (large for inline CSS) or 8 KB (browser cache efficiency drops). Helps decide between inline and external loading.
Ready Snippets — Copy-paste CSS `background: url(data:...)`, HTML `<img src>`, JS `new URL(data:...)`, or SVG inline. No escaping errors.

Frequently Asked Questions

When should I use data URIs?

For tiny assets (<4 KB) where saving an HTTP request matters: SVG icons, small PNG sprites, fallback fonts. For larger assets, HTTP/2 push or normal caching is faster (browsers can't cache data URIs).

Base64 vs percent-encoding?

Base64 is universal and works for any binary. For SVG or plain text, percent-encoding (URL encoding) is usually smaller — SVG often shrinks 20-30% vs base64. For binary (PNG, JPEG, fonts) always use base64.

Is there a max size?

Browsers support very long URLs, but practical limits vary: Chrome/Firefox handle multi-MB URIs; Edge/Safari are stricter. Above 64 KB, switch to external files or HTTP/2 push for reliability.

Is this tool free?

Yes. Data URI Builder on Pixlane is completely free with no signup required.