🔗 Data URI Generator

📝 Input Method

📄 File Selection

📄

Drop file here! Drag and drop any file here

Select any file to convert to data URI

Selected Files ({{ selectedFiles.length }})

Total Files: {{ fileCount }} Total Size: {{ formatFileSize(totalSize) }}

📝 Text Content

Length: {{ textInput.length.toLocaleString() }} characters

🏷️ MIME Type

⚙️ Options

Include charset parameter Optimize MIME type detection Generate usage examples

⚡ Quick Actions

📊 File Information

File Name:
{{ result.originalFileName }}

Original Size:
{{ formatFileSize(result.originalSize) }}

Provided MIME:
{{ result.providedMimeType }}

Detected MIME:
{{ result.detectedMimeType }}

Data URI Size:
{{ formatFileSize(result.dataUriSize) }} (+{{ result.sizeOverhead }}% overhead)

✅ MIME type optimized from {{ result.providedMimeType }} to {{ result.detectedMimeType }}

📊 Text Analysis

Text Length:
{{ result.textLength.toLocaleString() }} chars

MIME Type:
{{ result.mimeType }}

Most Efficient:
{{ result.analysis.mostEfficient.method }} (saves {{ result.analysis.savings.savingsPercent }}%)

📤 Generated Data URI

{{ getMainDataUri() }}

Length: {{ getMainDataUri().length.toLocaleString() }} characters

🔄 {{ formatVariationName(key) }} Recommended

{{ variation }}

Length: {{ variation.length.toLocaleString() }} characters

💡 {{ example.title }}

{{ example.code }}

💡 Recommendations

{{ rec }}

⚠️ {{ error }}

ℹ️ About Data URI Generator

A data URI, also called a data URL in browser specifications, embeds a resource directly in the URL string instead of pointing to a separate file. It is useful for small images, SVG snippets, icons, fonts, CSS, HTML fragments, and test fixtures that need to travel with the document.

Syntax: data:[media-type][;charset=UTF-8][;base64],payload. The media type tells the browser how to interpret the payload, ;base64 marks binary-safe Base64 content, and text payloads can be percent-encoded instead. If no media type is supplied, the original data URL specification defaults to plain text.

Image example: data:image/png;base64,iVBORw0... for an inline PNG in an <img> tag or CSS url().
Text example: data:text/plain;charset=UTF-8,Hello%20world for short text without Base64 overhead.
SVG example: percent-encoded image/svg+xml can be smaller and easier to inspect than Base64 for simple vector icons.

When to use data URIs:

Embed tiny, critical assets where avoiding a separate request is worth the extra HTML or CSS bytes.
Create self-contained examples, documentation pages, demos, email templates, or offline prototypes.
Store generated resources in JSON, JavaScript variables, or copied snippets without managing a separate file.

Limitations and compatibility notes:

Base64 increases payload size by roughly one third before the data: prefix, so large files usually belong in cacheable external assets.
Inlining prevents the browser from caching the resource independently across pages.
Content Security Policy can block data: sources unless the relevant directive allows them.
Use the correct registered media type such as image/png, image/svg+xml, text/css, or application/json.
Prefer percent encoding for short readable text and Base64 for binary data or text with many reserved URL characters.

Sources:

RFC 2397 defines the original data: URL scheme.
WHATWG Fetch Standard documents current browser handling for data: URL fetches.
RFC 4648 defines Base64 and other base encodings.
IANA Media Types is the registry for values such as image/png and text/css.
Content Security Policy Level 3 describes how source lists can allow or block data: resources.

API Usage Example:

POST /api/tools/webdev/data-uri-generator
Content-Type: application/json

{
    "inputMethod": "file",
    "fileData": "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==",
    "fileName": "sample.png",
    "fileType": "image/png",
    "includeCharset": false,
    "optimizeSize": true,
    "generateExamples": true
}