Data URI Encoder & Decoder

Encode any file to a base64 data URI for inline use in HTML, CSS, or Markdown. Decode data URIs back to downloadable files instantly.

Your files never leave your device — 100% client-side

<\!-- AdSense unit 1 -->

<\!-- Mode switcher -->

<\!-- ===== ENCODE PANEL ===== -->

<\!-- Drop zone -->

Drop any file here or click to browse

Images, SVGs, fonts, text, audio — any file type

Max file size: 2 MB

<\!-- File info bar -->

<\!-- Image/SVG preview -->

Preview

<\!-- Error -->

<\!-- Stats bar -->

Original Size

—

Encoded Size

—

Overhead

—

MIME Type

—

<\!-- Data URI output -->

Data URI 0 chars

<\!-- Code snippets -->

Code Snippets

<\!-- CSS -->

background-image

content

<\!-- HTML -->

img src

src attribute

<\!-- Markdown -->

Image

<\!-- ===== END ENCODE PANEL ===== --> <\!-- ===== DECODE PANEL ===== --> <\!-- ===== END DECODE PANEL ===== --> <\!-- AdSense unit 2 -->

<\!-- Cross-navigation --> <\!-- FAQ -->

Frequently Asked Questions

What is a data URI?

A data URI (also called a data URL) is a way to embed file content directly inside a URL string. Instead of pointing to an external file, a data URI encodes the file's binary content as base64 text and prefixes it with the MIME type. The format is: data:[MIME type];base64,[encoded data]. This lets you inline images, fonts, and other assets directly into HTML, CSS, or JavaScript without separate HTTP requests.

What file types can I encode as a data URI?

You can encode any file type as a data URI — images (PNG, JPEG, GIF, WebP, AVIF), vector graphics (SVG), fonts (WOFF, WOFF2, TTF, OTF), stylesheets (CSS), JavaScript files, plain text, JSON, XML, audio (MP3, OGG), and more. The file's MIME type is automatically detected and included in the data URI prefix.

Why is the encoded size larger than the original?

Base64 encoding converts every 3 bytes of binary data into 4 ASCII characters, which means the encoded output is approximately 33% larger than the original file. For example, a 100 KB image becomes about 133 KB as a base64 data URI. This size increase is the trade-off for being able to embed the file directly in text-based formats like HTML or CSS.

When should I use data URIs vs. regular file URLs?

Data URIs are best for small assets (under ~5 KB) used in only one place — tiny icons, small SVG images, or custom fonts in email templates. They eliminate an HTTP request. However, for larger files or assets reused across multiple pages, a regular URL is better: external files can be browser-cached, reducing total data transferred. Data URIs cannot be cached separately and increase HTML/CSS file size.

Is my file sent to a server when I encode it?

No. This tool is 100% client-side. Your files are read directly by your browser using the FileReader API and encoded in memory using JavaScript. Nothing is uploaded to any server. The encoding and decoding all happen locally on your device, so your files remain completely private.