386+ Tools Comprehensive Tools for Webmasters, Developers & Site Optimization

Data URI Generator - Create Base64 Data URLs for Web Development

Data URI Generator

Or enter custom MIME type below

What is a Data URI?

A Data URI (also called Data URL) is a way to embed small files inline in web documents. Instead of linking to an external file, the data is encoded directly into the URL using Base64 encoding. This is particularly useful for small resources like icons, small images, or inline styles and scripts.

Data URI Format

A data URI follows this structure:

data:[MIME-type][;base64],[data]

Example:

data:text/plain;base64,SGVsbG8gV29ybGQh

Why Use Data URIs?

  • Reduce HTTP Requests: Fewer server requests can improve page load speed
  • Self-Contained Documents: Create HTML files that don't depend on external resources
  • Inline Small Resources: Perfect for small icons, logos, and images
  • Email Templates: Embed images in HTML emails without attachments
  • Offline Applications: Work without network access
  • Quick Prototyping: Test without setting up file hosting

How to Use This Generator

  1. Enter Content: Paste your text, HTML, CSS, JavaScript, or SVG code
  2. Select MIME Type: Choose the appropriate content type
  3. Generate: Click the button to create the data URI
  4. Copy & Use: Copy the generated URI and use it in your HTML, CSS, or JavaScript

Usage Examples

Inline Image in HTML

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

Background Image in CSS

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

Inline SVG

<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0...">

Inline JavaScript

<script src="data:text/javascript;base64,Y29uc29sZS5sb2c..."></script>

Inline CSS

<link rel="stylesheet" href="data:text/css;base64,Ym9keXtiYWNrZ3...">

Inline HTML Document

<iframe src="data:text/html;base64,PCFET0NUWVBFIGh0bWw..."></iframe>

Common MIME Types

  • text/plain: Plain text
  • text/html: HTML document
  • text/css: CSS stylesheet
  • text/javascript: JavaScript code
  • application/json: JSON data
  • image/png: PNG image
  • image/jpeg: JPEG image
  • image/gif: GIF image
  • image/svg+xml: SVG vector
  • application/pdf: PDF document

Best Practices

  • Size Limit: Keep data URIs under 10KB. Larger files should be external resources
  • Caching: Data URIs can't be cached separately, so use for rarely-changing content
  • Gzip Compression: Enable server compression as data URIs are larger than binary files
  • Browser Support: Well-supported in all modern browsers (IE8+)
  • Performance: Too many data URIs can slow initial page load
  • Maintenance: Harder to update than external files

When to Use Data URIs

✓ Good Use Cases:
  • Small icons and logos (<5KB)
  • Critical CSS inline
  • Single-file HTML documents
  • Email templates
  • Quick prototypes
  • Web fonts (carefully)
✗ Avoid For:
  • Large images (>10KB)
  • Frequently updated content
  • Content used on multiple pages
  • Resources that benefit from CDN
  • Responsive images
  • Content that needs separate caching

Size Comparison

Data URIs are typically 33% larger than the original binary file due to Base64 encoding:

Example: A 3KB image becomes ~4KB as a data URI
Formula: Base64 size ≈ Original size × 1.37

Browser Compatibility

  • All Modern Browsers: Full support
  • Internet Explorer: IE8+ (with 32KB limit in IE8)
  • Mobile Browsers: Full support on iOS Safari, Chrome, Firefox
  • Email Clients: Mixed support - test before using in emails

Security Considerations

  • Data URIs are subject to same Content Security Policy (CSP) as inline scripts/styles
  • Be cautious with user-generated content to prevent XSS attacks
  • Always validate and sanitize input before converting to data URI
  • Some contexts may block data URIs for security reasons

Related Tools