Base64 File Encoder / Decoder
100% Client-Side. Files never upload to any remote server.
About Data URI Generator
The Complete Data URI Generator creates RFC 2397 `data:[<mediatype>][;base64],<data>` strings from any file, image, font (WOFF2/TTF), audio, or video with automatic MIME-type detection and CSS/HTML code formatting.
How to Use Data URI Generator
Step 1
Upload any media file or paste text content.
Step 2
Review the auto-detected MIME type.
Step 3
Select your desired wrapper format (Raw URI, CSS `@font-face`, or HTML tag).
Step 4
Click "Copy Data URI".
Practical Use Cases for Data URI Generator
Inlining Web Fonts into Single CSS Files
Encode WOFF2 and TTF web fonts into `@font-face { src: url("data:font/woff2;base64,..."); }` to eliminate font-loading layout shifts.
Single-Bundle Web Components & Widgets
Package sound effects, icons, and SVG sprites directly into JavaScript widget bundles.
Input & Output Examples
Generating WOFF2 Font Data URI
Uploaded font.woff2 (18 KB)
@font-face {\n font-family: "CustomFont";\n src: url("data:font/woff2;base64,d09GMgABAAAA...") format("woff2");\n}Key Features & Performance
- ✓Generates Data URIs for Images, Web Fonts (WOFF/WOFF2/TTF), Audio (MP3/WAV), Video (MP4/WebM), and JSON/Text.
- ✓Outputs ready-to-paste CSS `url(...)`, HTML `<img src="..." />`, `<audio src="..." />`, and React JSX.
- ✓Calculates exact Data URI character length and payload overhead.
- ✓100% Client-Side memory execution.
- ✓1-Click Copy Data URI.
Key Terminology & Definitions
RFC 2397 Data URI Scheme
A Uniform Resource Identifier scheme that allows data items (like images or fonts) to be included in-line in web pages as if they were external resources.
MIME Type (Media Type)
A two-part identifier (e.g. `image/png`, `font/woff2`) indicating the nature and format of a document or file.