Data URI Generator

Convert files to base64 data URIs for inline embedding in HTML and CSS. Perfect for small images, icons, fonts, and text files.

Drop file here or click to upload

Supports: Images (PNG, JPG, GIF, SVG, WebP), Text (CSS, JS, JSON), Fonts (TTF, WOFF, WOFF2)

Usage Examples

HTML Image Tag

<img src="data:image/png;base64,iVBORw0KG..." alt="Inline Image" />

CSS Background Image

.element {
  background-image: url('data:image/png;base64,iVBORw0KG...');
  background-size: cover;
}

CSS Font Face

@font-face {
  font-family: 'CustomFont';
  src: url('data:font/woff2;base64,d09GMgAB...');
  font-weight: normal;
  font-style: normal;
}

Inline CSS in Emails

<div style="background-image: url('data:image/png;base64,iVBORw0KG...');">
  Email content with inline image
</div>

Instant Conversion

Convert files to data URIs instantly with drag-and-drop support.

Multiple Formats

Support for images, text files, fonts, and more.

Size Analysis

See file size comparison and get warnings for large files.

Benefits & Use Cases

Reduce HTTP Requests

Embed small resources directly in HTML/CSS to eliminate separate HTTP requests and improve page load times.

Email Templates

Perfect for HTML emails where external images might be blocked. Data URIs ensure images always display.

Single-File Applications

Create self-contained HTML files with all assets embedded, perfect for offline use or easy distribution.

Icons & Small Graphics

Ideal for small icons, logos, and UI elements that are used frequently throughout your site.

Font Embedding

Embed web fonts directly in CSS to ensure fonts load quickly without external requests.

Frequently Asked Questions

What is a data URI?

A data URI (Uniform Resource Identifier) is a way to embed small files directly into HTML or CSS using a base64-encoded string. It starts with 'data:' followed by the MIME type and base64 data, eliminating the need for separate HTTP requests to load resources.

What file types are supported?

The tool supports images (PNG, JPG, GIF, SVG, WebP), text files (CSS, JavaScript, JSON, TXT), and fonts (TTF, WOFF, WOFF2). These are the most common file types used for inline embedding in web development.

Should I use data URIs for large files?

No, data URIs are best suited for small files under 100KB. Large data URIs increase your HTML/CSS file size by approximately 33% due to base64 encoding, which can negatively impact page load performance. Use regular file links for larger resources.

How do I use a data URI in HTML?

For images, use it as the src attribute: <img src="data:image/png;base64,..." alt="Image">. For CSS backgrounds, use: background-image: url('data:image/png;base64,...');. The data URI completely replaces what would normally be a file path.

Why is the data URI larger than the original file?

Base64 encoding increases file size by approximately 33% because it converts binary data to text format using only ASCII characters. This is a normal trade-off for the convenience of inline embedding and reducing HTTP requests. The size increase is consistent and predictable.

Are data URIs supported in all browsers?

Yes, data URIs are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. They have been a web standard for many years and are safe to use in production websites.

Can data URIs be cached?

Data URIs are cached as part of the HTML or CSS file they're embedded in. This means they're cached whenever the parent document is cached, but they can't be cached separately like external files. For frequently used resources across multiple pages, external files with proper caching may be more efficient.