Question 1

What is a data URI?

Accepted Answer

A URL with the scheme `data:` that contains the resource itself inline, instead of pointing to a server. Format: `data:[][;base64],`. Defined in RFC 2397 (1998). Browsers, email clients, and most parsers treat it as a regular URL, you can use it anywhere a URL is expected: `

`, `background-image: url(...)`, `href=...`.

Question 2

When should I use data URIs vs separate files?

Accepted Answer

Inline (data URI): small assets that block render (critical CSS background, decorative icons), single-use SVGs, content shipped in JSON over an API where a separate fetch would add latency. Separate file: anything cacheable (the data URI is re-downloaded on every page that uses it), anything that might be shared between pages, anything over ~5KB. Inline is a tradeoff between fewer requests and worse caching.

Question 3

Do data URIs have to be Base64?

Accepted Answer

No. The `;base64` flag is optional. For text content (SVG, plain text), you can use URL-encoded form which is more compact than Base64 (~no overhead vs Base64's 33%). SVG-as-CSS-background is the canonical case: `data:image/svg+xml,<svg>...%3C/svg%3E` is smaller than the Base64 version.

Question 4

What's the size limit?

Accepted Answer

RFC 2397 didn't specify. Browsers vary: Chrome and Firefox handle multi-MB data URIs in `<img src>`. CSS `url()` is typically lower (some browsers truncate around 2MB). The CSP `data:` source restriction (`img-src data:`) has its own quirks. Practical guidance: keep data URIs under 5KB; bigger assets should be separate files.

Question 5

Do data URIs work cross-origin?

Accepted Answer

Data URIs have no origin in the traditional sense, they're inline. In most contexts that means same-origin (the page that loaded them), so CORS-style restrictions don't apply. But canvas-tainting rules still trigger for image data URIs from external decoding; and CSP requires explicit `data:` in source directives. SVG data URIs cannot reference external resources from inside the SVG.

Question 6

Why is the Base64 output larger than the original file?

Accepted Answer

Base64 encoding has a 33% overhead, every 3 bytes become 4 characters. A 1KB file becomes ~1.37KB as a Base64 data URI. URL-encoded form for text content is more efficient (~3-15% overhead depending on character distribution).

Question 7

Is my file uploaded anywhere?

Accepted Answer

No. The browser reads the file via the FileReader API and computes the Base64 entirely client-side. The data URI is generated in your tab and never sent to a server. This matters for proprietary assets, brand logos, icon sets under license, internal design system files.

Question 8

What standards does Data URI Generator / Decoder validate against?

Accepted Answer

Data URI Generator / Decoder checks compliance with RFC 2397 (data: URIs).

Question 9

What are the limitations of Data URI Generator / Decoder?

Accepted Answer

Large files produce very long strings Base64 encoding increases size by ~33% Does not support streaming

Asset Type	Recommended Encoding	File Size Limit	Primary Benefit
Icons / Logos	Base64 (PNG) / URL (SVG)	< 5 KB	Zero HTTP Latency
Critical Web Fonts	Base64 (WOFF2)	< 20 KB	Prevents FOUT/FOIT
Email Graphics	Base64 (JPEG/PNG)	< 50 KB	Bypasses Blockers
Large Images	External URL	N/A	Cacheable / Chunked

Data URI Generator / Decoder

Learn More

Base64 Encoding: When You Should and Shouldn't Use It (2026 Guide)

What is Data URI Generator / Decoder?

Frequently Asked Questions

Technical Deep Dive

Data URI Generator / Decoder

Spec-Compliant

Lossless Round-Trip

Handles Edge Cases

01 Data URI Strategy Matrix

02 Conversion Pipeline

Runs 100% in your browser

You Might Also Need

AES Encrypt / Decrypt

Base32 Encoder/Decoder

Base64 Encoder

Caesar / ROT13 Cipher