Base64 Data URI
Parse a Data URI to extract its MIME type, size, and preview. Or generate a complete Data URI from a MIME type + Base64 string.
What Is a Data URI?
A Data URI (also called a Data URL) is a URI format that embeds the complete file content directly in the URI string, rather than pointing to an external file. This allows images, fonts, PDFs, and any other files to be inlined in HTML, CSS, or JSON without additional HTTP requests.
Data URIs are defined by RFC 2397, supported by all modern browsers and one of the standard ways to embed images in HTML emails.
Data URI Syntax
| Part | Required | Description |
|---|---|---|
| data: | Required | Fixed prefix that declares this is a Data URI |
| mediatype | Optional | MIME type, e.g. image/png. Defaults to text/plain;charset=US-ASCII if omitted |
| ;base64 | Optional | Declares the data is Base64-encoded. If omitted, data appears as URL-encoded text |
| , | Required | Separator between the header and the data |
| data | Required | Actual content — a Base64 string or URL-encoded text |
Examples
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Y2lyY2xlIG…data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==data:text/html;base64,PCFET0NUWVBFIGh0bWw+PGh0bWw+PGJvZHk+PGgxPkhlbGxvPC9oMT48L2JvZHk+PC9odG1sPg==When to Use (and Not Use) Data URIs
Good use cases
- Small images inlined in CSS or HTML (< 5 KB)
- Embedding images in HTML emails
- Inlining small fonts in @font-face
- Favicon written directly in <link>
- Passing small attachments in JSON APIs
- Single-file HTML that needs self-contained resources
Avoid Data URIs when
- Large files (> 10 KB) — size overhead is significant
- Resources that need independent browser caching
- Images shared across multiple pages (no cache reuse)
- Content that needs CDN delivery or lazy loading
- Many images (each inlined inflates the HTML)
- Scenarios requiring server-side streaming
Frequently Asked Questions
What is a Data URI?
A Data URI is a format that embeds file data directly in a URL string, using the format data:[mime][;base64],[data]. It lets images, fonts, and text be inlined in HTML, CSS, or JSON without additional HTTP requests.
What is the difference between a Data URI and a regular URL?
A regular URL (e.g. https://example.com/image.png) is a pointer to an external resource — the browser fetches it over the network. A Data URI contains the content itself, requires no network request, but cannot be cached independently.
Can Data URIs be used in HTML emails?
Yes, and it's a common technique. Many email clients block external image URLs by default, but a Data URI embeds the image directly in the email HTML — no external request needed, so the image always displays. The drawback is it increases email file size.
Why can't Data URIs be cached by the browser?
A Data URI is part of the HTML or CSS document — the browser caches the whole document, not the Data URI itself. If multiple pages use the same image, an external URL is downloaded once, whereas a Data URI must be included in every page that uses it.
How do I extract the MIME type from a Data URI?
A Data URI follows the format data:[mime];base64,[data] — the MIME type is the part between data: and the first ; or ,. For example, in data:image/png;base64,xxx the MIME type is image/png.
What is a Data URI without ;base64?
If ;base64 is omitted, the data portion is URL-encoded text rather than Base64. For example, data:text/html,<h1>Hello</h1> is a valid Data URI (the browser URL-decodes and renders it). This format only works for text content — binary files must use Base64.
Related Tools
Data URI Generator
Upload a file, auto-add MIME prefix, generate a complete Data URI.
File to Base64
Convert any file to Base64, Data URI, or HTML inline format.
Image to Base64
Convert an image to a Data URI for direct use in HTML or CSS.
SVG to Base64
Encode SVG as a Base64 Data URI for CSS background-image.