Data URI Encoder / Decoder

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

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

• 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.