Data URI Converter

Convert files to data URIs and back — everything runs locally in your browser, no upload needed.

Drop a file here or click to select

Any file type — images, SVG, fonts, CSS, JSON, PDF…

Base64 encode

Click any example to load it, or copy the data URI directly. These are real, working data URIs.

What are Data URIs?

Data URIs (RFC 2397) embed file content directly in HTML, CSS, or JavaScript as a string — no separate HTTP request needed. The format is:

data:[mediatype][;base64],data

Example — a 1×1 transparent PNG:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

Common Use Cases

  • CSS backgrounds — embed small icons or patterns directly in stylesheets to eliminate HTTP requests
  • Inline images in HTML — reduce requests for critical above-the-fold images
  • SVG icons — inline SVG without extra files or XSS concerns
  • Favicons — <link rel="icon" href="data:image/..."> avoids an extra request
  • Email HTML — some email clients support inline images via data URI
  • Offline / single-file apps — bundle all assets into one HTML file

Size Overhead

  • Base64 adds ~33% overhead — 3 bytes become 4 ASCII characters
  • URL-encoding is smaller for text content (SVG, HTML, CSS) because many characters don't need escaping
  • Practical limit — modern browsers handle multi-megabyte data URIs, but gzip/cache wins make separate files better above ~5–10 KB
  • Best candidates — icons under 2 KB, 1×1 tracking pixels, CSS spinner animations, inline SVG logos

Base64 vs URL-Encoding

Binary files (PNG, JPEG, fonts, PDFs) must use base64. Text-based formats (SVG, HTML, CSS, JSON) can skip base64 — just URL-encode special characters. URL-encoding is typically 10–30% smaller for SVG content.

Browser Support

Data URIs are supported in all modern browsers. The old IE 8 limit of 32 KB no longer applies. There is no hard spec limit, though very large data URIs (10 MB+) can cause performance issues.