Data URI Generator

Convert images to data URIs for embedding directly in CSS, HTML, or JavaScript. Drag and drop any image file to generate a base64-encoded data URI that eliminates the need for external image files.

Upload Image

Drop an image here or click to browse

Supports PNG, JPG, GIF, SVG, WebP

Usage Examples

HTML

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

CSS

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

JavaScript

const img = new Image();
img.src = 'data:image/png;base64,iVBORw0KG...';
document.body.appendChild(img);

What is a Data URI?

A Data URI (Uniform Resource Identifier) is a way to embed small files directly into HTML, CSS, or JavaScript code instead of linking to external files. Data URIs use base64 encoding to represent binary data as text.

The format is: data:[MIME-type];base64,[base64-encoded-data]

Benefits of Data URIs

Reduce HTTP requests: Embedding images eliminates separate network requests, improving page load times.
Offline functionality: Images work without external file dependencies, perfect for offline apps.
Simplify deployment: Everything is contained in a single file, no need to manage image assets separately.
Email compatibility: Embedded images work in HTML emails without hosting images externally.
No external dependencies: Useful for widgets, bookmarklets, and single-file applications.
Cache control: Data URIs are cached with the parent document, not separately.

Limitations & Best Practices

Size Considerations

Data URIs are ~33% larger than the original file due to base64 encoding
Best for small images (icons, logos, small graphics under 10KB)
Large data URIs can slow down page parsing and increase memory usage
Cannot be cached separately from the parent document

Browser Support

Data URIs are supported in all modern browsers. IE8+ supports data URIs up to 32KB in size.

When to Use

Small icons and UI elements that don't change frequently
Images that are critical to initial page render
Single-file HTML documents or email templates
Offline applications or browser extensions

When NOT to Use

Large images (photos, detailed graphics over 50KB)
Images that need to be cached separately or updated frequently
Responsive images that need multiple resolutions
Images used in multiple places (defeats purpose of caching)

Common Use Cases

✓ Inline SVG Icons

Small vector icons embedded directly in CSS or HTML for instant rendering.

✓ Loading Spinners

Animated GIFs or small PNGs that need to display immediately.

✓ Email Templates

Logos and small graphics in HTML emails to avoid blocked images.

✓ Browser Extensions

Icons and UI elements in Chrome/Firefox extensions.

✓ Single-Page Apps

Critical UI elements needed before JavaScript loads.

✓ Favicons

Embed small favicon directly in HTML for offline support.

Performance Tips

Optimize before encoding: Compress images before converting to data URIs to minimize size.
Use CSS sprites: For multiple small images, consider CSS sprites with a single data URI.
Lazy load: For non-critical images, load data URIs dynamically with JavaScript.
Consider SVG: For icons and simple graphics, inline SVG is often smaller and more scalable.
Cache strategically: Remember that data URIs are cached with their parent document.
Monitor bundle size: Large data URIs in CSS/JS increase bundle size and parsing time.