What is a Data URL?
How data URLs embed files directly in HTML and CSS, the syntax, when they're useful, and when to avoid them.
What is a data URL?
A data URL (also called a data URI) is a URL scheme that encodes a file's content directly into the URL itself rather than pointing to an external resource. Instead of the browser making a network request to fetch a file, the file is embedded inline.
They're most commonly used to embed images, but they can encode any file type — fonts, SVGs, audio, PDF, or arbitrary binary data.
A data URL looks like this:
data:[<mediatype>][;base64],<data>
Anatomy of a data URL
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA... ^ ^ ^ ^ | | | └─ the actual file data (Base64-encoded) | | └─ encoding (base64 for binary files) | └─ MIME type (what kind of file this is) └─ the scheme (always "data")
MIME type — tells the browser what kind of data follows. Common examples: image/png, image/svg+xml, font/woff2, text/css, application/pdf.
;base64 — for binary files, the data is Base64-encoded (a text representation of binary data using 64 safe ASCII characters). Omit this for plain text data.
Data — the actual content. For Base64, this is the encoded binary. For plain text, it can be the raw content (with special characters percent-encoded).
Examples
Embedding an image in HTML
<!-- Instead of: <img src="/icon.png"> --> <img src="data:image/png;base64,iVBORw0KGgoAAAAN..." alt="icon">
Embedding an SVG in CSS
/* SVG doesn't need base64 — you can use URL-encoded SVG text */
.icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...%3E");
}Embedding a font in CSS
@font-face {
font-family: 'MyFont';
src: url('data:font/woff2;base64,d09GMgAB...') format('woff2');
}Programmatic download via JavaScript
// Create a downloadable file from in-memory data
const csv = "name,age
Ada,36
Alan,41"
const dataUrl = "data:text/csv;charset=utf-8," + encodeURIComponent(csv)
const link = document.createElement('a')
link.href = dataUrl
link.download = "data.csv"
link.click()When to use data URLs
Good use cases:
— Small icons or images used in CSS where an extra HTTP request would cost more than the size overhead
— Email HTML — email clients often block external image requests; embedding images as data URLs guarantees they appear
— Offline-capable apps — data URLs work without a server
— Programmatic file generation in JavaScript (CSV download, canvas export)
Avoid for:
— Large images — Base64 encoding adds ~33% to file size, and the data can't be cached separately by the browser
— Images reused across multiple pages — a separate file is cached once; a data URL is re-sent on every page load
— Any asset larger than ~10–15 KB — the 33% size increase and lack of caching make a regular URL more efficient
Frequently asked questions
- Do data URLs affect page load performance?
- It depends on size and usage pattern. For tiny assets (under 5 KB) used on one page, embedding avoids a separate HTTP request and can be faster. For larger assets or assets reused across pages, data URLs are worse: they increase the page's HTML/CSS size by 33%, block caching, and delay page parsing since all data must be loaded before the page renders.
- Can data URLs be blocked by Content Security Policy?
- Yes. CSP's img-src, font-src, and other directives must explicitly allow data: for data URLs to work. By default, many restrictive CSP policies block them. If you're adding data URLs to a CSP-protected site, add data: to the relevant directive.
- What's the size limit for a data URL?
- There's no formal standard limit, but browsers impose practical limits. Chrome handles data URLs up to about 2 MB without issues. Beyond that, some browsers may truncate, reject, or slow down significantly. For large files, use Blob URLs (URL.createObjectURL()) instead — they reference in-memory data without the 33% Base64 overhead.