What is a Data URI? — Embedding Data in URLs Explained
Definition
A Data URI (also called a data URL) is a uniform resource identifier (URI) scheme that allows you to embed small data directly into a web document rather than linking to an external resource. The scheme embeds the data inline as a base64-encoded or percent-encoded string, enabling the browser to render resources such as images, fonts, CSS, and HTML without making additional HTTP requests.
Data URIs were first defined in 1998 by the IETF in RFC 2397 and have been supported by all major browsers for many years.
Data URI Format
The general format of a data URI is:
data:[<mediatype>][;base64],<data>
| Part | Description | Example |
|---|---|---|
data: |
The URI scheme prefix | data: |
mediatype |
A MIME type (optional, defaults to text/plain;charset=US-ASCII) |
image/png, text/html |
;base64 |
Flag indicating base64 encoding (optional) | ;base64 |
data |
The encoded data content | iVBORw0KGgo... |
Examples by MIME Type
Plain text:
data:,Hello%2C%20World!
HTML:
data:text/html,<h1>Hello%20World</h1>
SVG image:
data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><circle cx="25" cy="25" r="20" fill="red"/></svg>
Base64-encoded PNG:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...
Common Use Cases
Inline Images
Data URIs are frequently used for small images like icons, spinners, and logos to reduce HTTP requests:
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='6' fill='%23333'/%3E%3C/svg%3E" alt="Icon">CSS Background Images
Embedding small background images directly in CSS eliminates extra network requests:
.icon {
background-image: url("data:image/svg+xml,...");
}Web Fonts
Data URIs are used to embed icon fonts or small custom fonts, particularly in CSS @font-face declarations (though WOFF2 files loaded externally are preferred for larger fonts).
Email and HTML Documents
Data URIs are valuable in self-contained HTML documents like emails, where external resource loading is unreliable:
<!DOCTYPE html>
<html>
<body>
<img src="data:image/png;base64,iVBORw0KGgoAAAAN..." alt="Banner">
</body>
</html>Pros and Cons
Advantages
| Pro | Explanation |
|---|---|
| Fewer HTTP requests | Eliminates separate network requests for small resources |
| Self-contained documents | Everything is embedded — useful for emails and offline documents |
| No server configuration | No need for CORS headers or MIME type configuration |
| Works offline | Embedded resources are available without network access |
| No caching issues | The data travels with the document, not as a separate cacheable resource |
Disadvantages
| Con | Explanation |
|---|---|
| Larger size | Base64 encoding adds approximately 33% overhead to binary data |
| No caching | Data URIs cannot be cached independently — the entire parent page must be re-downloaded |
| URL length limits | Browsers and servers may truncate or reject very long URIs |
| Harder to maintain | Changing an embedded resource requires editing the parent document |
| Poor compression | Base64-encoded data does not compress as well as raw binary files |
| CPU overhead | Base64 decoding consumes client-side processing time |
Browser Support
Data URIs are supported in all modern browsers, including:
- Chrome (all versions since 2008)
- Firefox (all versions since 2.0)
- Safari (all versions since 3.1)
- Edge (all versions including legacy Edge)
- Internet Explorer 8+
Size Limitations by Browser
| Browser | Maximum Length |
|---|---|
| Chrome | 2 MB (for non-base64, larger for base64) |
| Firefox | Unlimited in practice |
| Safari | Unlimited in practice |
| Edge | ~ 2 MB |
| IE 8+ | 32 KB limit in some contexts |
For maximum compatibility, keep data URIs under 32 KB if supporting older browsers, or under 1 MB for modern browser targets.
Performance Implications
When to Use Data URIs
- Small icons and UI elements — fewer than 2 KB raw size
- Sprites and critical CSS images — eliminate blocking requests
- Email HTML — where external loading is unreliable
- Offline-first applications — reduce dependencies on network caching
When to Avoid Data URIs
- Large images — base64 expansion and lack of caching hurt performance
- Frequently changing resources — forces cache invalidation of the parent page
- Resources shared across many pages — duplicated bytes everywhere
- High-traffic sites — the base64 decoding overhead adds up on slower devices
Best Practices
- Keep data URIs under 2 KB for the best performance trade-off
- Use data URIs for resources that would otherwise be a single-use HTTP request
- Prefer external files for anything larger than a thumbnail-sized image
- Use HTTP/2 multiplexing as an alternative — it reduces the overhead of multiple requests
- Consider SVG inline (not base64) for vector graphics — it compresses better with gzip
Encoding Methods
Percent-Encoding (for text/small data)
For text content, you can use URL percent-encoding:
data:text/plain;charset=utf-8,Hello%20world%21
Base64 Encoding (for binary data)
For images, fonts, and other binary content, use base64:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...
Use LangStop's tools to convert any file or string to base64 for use in data URIs.
LangStop Data URI Tools
- Base64 Encoder — Encode text or files to base64 for data URIs
- Base64 to Image — Decode base64 data URIs back to viewable images
- Base64 Converter — General base64 encoding and decoding
- URL Encoder — Percent-encode text for data URI use