About Data URI Generator

Wrap any text (or file contents) into a base64 data: URI. Part of the DevTools Surf developer suite. Browse more tools in the Generators collection.

Use Cases

• Frontend devs inlining small icons to reduce HTTP requests
• Email template builders embedding images that survive forwarding
• CSS authors embedding SVG backgrounds without external files
• Single-page app devs bundling tiny assets into JavaScript

Tips

• Inline small icons as data URIs to eliminate HTTP requests
• Keep data URIs under 32KB for optimal browser performance
• Use for embedding SVGs directly in CSS background-image

Fun Facts

• The data: URI scheme was formally defined in RFC 2397, published in August 1998 by Larry Masinter at Xerox PARC.
• Internet Explorer did not support data URIs until version 8 (2009), and even then limited them to 32KB — a restriction that persisted for years.
• A base64-encoded data URI is approximately 33% larger than the original binary file because base64 encodes every 3 bytes as 4 ASCII characters.

FAQ

What data can I embed?

Text (CSS, HTML, SVG, JavaScript) and file contents. Output is a `data:` URI that you can paste into an `<img src>`, CSS `background: url(...)`, or anywhere a URL is expected.

Is base64 always needed?

For binary yes. For text with printable ASCII only, toggle off — URL-encoded (non-base64) data URIs are smaller for text content like SVG.

How does this compare to external files?

Smaller HTTP request count (no separate fetch), but base64 overhead (~33% larger). Good for small icons and one-off embeds; bad for large files.

Do data URIs work in emails?

Most email clients strip or block them. For email images use attached CID references or hosted URLs. Data URIs are a web-only technique in practice.