Data URI

A data URI embeds a file directly inside a URL, so the browser does not need a separate request to get it. It is defined in RFC 2397.

Syntax

data:[<media type>][;charset=<charset>][;base64],<data>

Examples:

data:text/plain;base64,SGVsbG8=
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E
data:,Hello%20World            (defaults to text/plain;charset=US-ASCII)

Base64 or URL encoding?

• Binary files (PNG, JPG, fonts, PDF) must use ;base64.
• SVG and other text can be URL-encoded instead, which is usually 10–30% smaller than Base64 and stays readable. Encode at least #, %, <, > and quotes.

Where you can use data URIs

• HTML: <img src>, <a href download>, <link rel="icon">, <audio>, <video>, <object>, <iframe> — see Base64 in HTML.
• CSS: anything that takes url(), such as background-image, cursor, @font-face, list-style-image — see Base64 in CSS.
• JavaScript: new Image().src, fetch('data:...') to decode Base64 into a Blob.

Advantages and drawbacks

With HTTP/2 and HTTP/3, extra requests are cheap, so inline only small resources (roughly under 4 KB) or things needed for the first paint.

Browser limits and security

• Modern browsers support data URIs of hundreds of megabytes in src attributes, but very long URLs slow down parsing. Use Blob URLs for big files.
• For security, Chrome, Firefox and Safari block top-level navigation to data: URLs (typing them in the address bar or opening them via links) for most MIME types, because they were abused for phishing. Downloads with the download attribute still work.
• data: URLs have an opaque origin: scripts inside them cannot access the parent page.

Learn more

• How CSS sprites compare with data URIs
• Does gzip remove the Base64 overhead?
• Create one now: Image to Base64 · File to Base64 · Data URL to image