Data URI Encoder / Decoder

One input per line. Output is numbered to match the input order.
Pinned tools are listed in your favourites on the home page.Copies a link to this tool that carries your current input, so it opens ready to run.Gives you an iframe snippet for putting this tool on your own site.
Drop a file to encode it as a data URI
Ctrl+Enter Run  · Ctrl+Shift+C Copy  · Esc Clear

Understand Data URI Encoder / Decoder

A data URI carries a file's contents inside the URL itself, so an image, font, or SVG can be embedded directly in HTML or CSS instead of being fetched.

How it works

The format is data:<mime-type>;base64,<payload> — for example data:image/svg+xml;base64,PHN2Zy4uLg==. Text you type is encoded as UTF-8 and then Base64; a file dropped onto the tool is read as raw bytes and its MIME type comes from the file itself. Base64 adds roughly a third to the size, which is the trade you are making against one saved HTTP request.

When to use it

  • Inlining a small icon or SVG in CSS so it renders with the first paint instead of after a second request.
  • Embedding images in an HTML email, where many clients block external image URLs by default.
  • Building a single-file HTML page or a bookmarklet that has to work with no server behind it.
  • Pulling the payload out of a data: URL found in a stylesheet to see what it actually contains.

Watch out for

  • A data URI cannot be cached on its own. The bytes ship inside every copy of the document that references them, so past roughly 5 KB an external file usually wins on repeat visits.
  • Decoding expects the ;base64, form. A percent-encoded data URI — data:image/svg+xml,%3Csvg... — is perfectly valid and is not handled here.
  • Decoding renders the payload as text, so a PNG or a WOFF comes back as unreadable characters. For SVG and other text formats you get the real source back.
  • Content-Security-Policy blocks data: URLs unless the directive allows them, so a page sending img-src 'self' will not render an inlined image. Browsers also block top-level navigation to a data: URL, so you cannot preview one by pasting it into the address bar.

Frequently Asked Questions

When should I use data URIs?

Data URIs eliminate HTTP requests for small assets. Good uses: small icons and SVGs in CSS (url("data:image/svg+xml,...")), inline images in HTML emails where external URLs are blocked, single-file HTML apps, and embedding fonts in CSS without a separate network request.

What is the size overhead of base64 encoding?

Base64 encoding adds ~33% size overhead. A 30KB PNG becomes ~40KB as a data URI. For assets over ~5KB, the size increase and inability to cache separately usually makes external files more efficient than data URIs.

Can I use data URIs for JavaScript bundles?

No — browsers block script execution from data: URLs in many contexts due to security concerns (XSS). Data URIs are safe for images, fonts, stylesheets, and SVGs used in background-image or src attributes on non-script elements.

How to Use Data URI Encoder / Decoder

  1. Paste or type your input in the input area above.
  2. The tool processes your input automatically or click Run.
  3. Copy or download the result using the action buttons.
  4. Use Ctrl+Enter to run quickly from the keyboard.