Images · SVG · PDF · Fonts · Audio

Data URI Generator

Convert any file to a Data URI — and get ready-to-paste HTML embed code, CSS background-image, @font-face rule, or JSON payload. Everything runs in your browser.

Data URI Generator

Drop a file here or click to browse

Images · SVG · PDF · Fonts · Audio · Text · Max 25 MB

Upload a file to generate a Data URI

How to Generate a Data URI

Upload a file

Drag and drop or click to select any file — image, SVG, PDF, font, audio, or text. The MIME type is detected automatically.

Choose output format

Select Data URI, HTML, CSS, or JSON. The HTML and CSS outputs adapt to the file type automatically — fonts get @font-face, audio gets <audio>, images get background-image.

Copy and use

Click Copy to send the result to your clipboard, ready to paste into code. For large files, use Download .txt instead.

Supported File Types

Each file type produces HTML and CSS output optimized for its actual use case.

ImagesPNG · JPEG · GIF · WebP · AVIF · ICO

Inline images in HTML <img> tags and CSS background-image. No extra file request needed.

data:image/png;base64,iVBORw0KGgo...

SVGimage/svg+xml

Embed scalable vector graphics inline in HTML or CSS without an external file. Works with both <img> and background-image.

data:image/svg+xml;base64,PHN2ZyB4bWxu...

PDFapplication/pdf

Embed a PDF inline in HTML using the <object> tag. Useful for standalone documents or small reports that need to render without an external URL.

data:application/pdf;base64,JVBERi0x...

FontsWOFF2 · WOFF · TTF · OTF

Embed fonts directly in CSS @font-face rules. Eliminates external font requests and prevents FOUT in the critical render path.

data:font/woff2;base64,d09GMgABAAAA...

AudioMP3 · OGG · WAV · FLAC

Embed short audio clips inline in HTML <audio> elements. Useful for small UI sounds, notification tones, or offline apps.

data:audio/mpeg;base64,SUQzBAAAAAA...

Text filesTXT · HTML · CSS · JSON · XML

Generate download links for text files without server hosting. Also supports inlining HTML in an iframe for sandboxed content.

data:text/plain;base64,SGVsbG8gV29ybGQ...

Using Data URIs in HTML and CSS

Common ways to embed file data directly into your markup and stylesheets.

CSS background-imagecss

.hero {
  background-image: url("data:image/png;base64,iVBOR...");
  background-size: cover;
}

CSS @font-facecss

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

HTML Inline Imagehtml

<img
  src="data:image/svg+xml;base64,PHN2Zy..."
  alt="logo"
  width="48"
  height="48"
/>

JSON API Payloadjson

{
  "filename": "icon.png",
  "mime": "image/png",
  "encoding": "base64",
  "size": 4218,
  "data": "iVBORw0KGgoAAAANSUhEUg..."
}

When to Use Data URIs

Data URIs are best for small assets where eliminating HTTP requests matters more than cacheability.

Reduce HTTP Requests

Data URIs embed files directly in HTML or CSS — no separate request, no CDN dependency, no broken assets if your server goes down.

Self-contained HTML Files

Create portable HTML files with images, fonts, and icons all inlined. Open offline, share as a single attachment, or export as a snapshot.

Inline Font Loading

Embed a WOFF2 font in a CSS @font-face rule to eliminate web font requests, reduce FOUT, and make your stylesheet completely self-contained.

Critical-path Assets

Inline small icons, logos, and background images directly into your page HTML so they render with the first byte — zero render-blocking requests.

Frequently Asked Questions

What is a Data URI?

A Data URI (also called a data URL) is a URI scheme that embeds file data inline using the format data:[mimetype];base64,[encoded-data]. It lets you include images, fonts, PDFs, and other files directly in HTML or CSS without referencing an external URL.

Which file types work with CSS Data URIs?

CSS Data URIs work for images (background-image: url(...)) and fonts (@font-face). Other file types like PDF, audio, and text have no standard CSS use case, so the CSS tab is disabled for those types.

Are large files suitable for Data URIs?

No. Data URIs inflate the file size by about 33% (Base64 encoding overhead), and the browser cannot cache them separately. Data URIs work best for small assets under 10 KB. For larger files, serve them via a URL instead.

What is the difference between a Data URI and a Base64 string?

A Base64 string is just the encoded data. A Data URI adds a MIME type prefix (data:image/png;base64,...), making it usable directly as a value for src, href, or CSS url().