search

Found

info Overview

Convert any file to a Base64 Data URI and decode Data URIs back into files. Shows MIME type, file size and Base64 length, with inline preview for images.

📘 How to Use

  1. Pick the "File to Data URI" or "Data URI to File" tab at the top
  2. Drop a file into the zone to encode, or paste a Data URI string to decode
  3. Read the MIME type, file size and Base64 length, plus the image preview

Data URI Converter

Copied!

grid_view Related

Article

Data URI Converter | Two-Way File and Base64 Data URI Conversion

Turn any image, font, or PDF into a data: scheme Base64 Data URI, and decode existing Data URIs back into downloadable files. The tool shows the MIME type, file size, and Base64 length, and previews images inline.

💡 About this tool

Inlining a small icon or logo as a Data URI inside your HTML or CSS removes one HTTP request, which can shave a round trip off your page load. It is the classic trick for CSS background-image, email HTML, and single-file demos where you do not want external assets floating around. The flip side is debugging: when you find a data: blob in someone else's stylesheet, you often want to know what it actually is, or to pull the original image back out.

This converter covers both directions through a tab switch. The encode side accepts drag-and-drop and immediately reports the resulting Base64 length, so you can judge whether the asset is small enough to inline without bloating your file. The decode side parses a pasted Data URI, surfaces the MIME and decoded size, previews images, and exports the bytes as a properly named file in one click.

🧐 Frequently Asked Questions

Q. Which file types are supported? Anything the browser can read: images, fonts, PDFs, plain text, and more. The Data URI format itself is type-agnostic.

Q. How much does Base64 inflate the size? Base64 grows binary data by roughly 4/3. The Base64 length shown lets you see the overhead, which is why inlining suits small assets of a few KB rather than large files.

Q. Can it read a Data URI without ;base64? Yes. Percent-encoded forms such as data:text/plain,Hello are parsed too, and the MIME type is reported.

Q. What name does the decoded file get? The extension is inferred from the MIME type, producing names like decoded-file.png. When the type is unknown it falls back to .bin.

📚 Why Data URIs still matter

The Data URI scheme is defined in RFC 2397 with the shape data:[<mediatype>][;base64],<data>. On forums like Stack Overflow the recurring advice is pragmatic: inline only tiny assets, because a Data URI cannot be cached separately from the document that holds it. A 2 KB SVG icon embedded in CSS is a win; a 200 KB hero image is usually not. A handy modern pattern is inlining an SVG as a Data URI to use it as a CSS background without an extra file, which keeps a component fully self-contained.

All file reading and conversion happen entirely in your browser; nothing is uploaded to a server.