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 asbackground-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
| Advantage | Drawback |
|---|---|
| No extra HTTP request | Base64 adds ~33% to the size |
| Works offline and in single-file documents | Not cached separately from the HTML/CSS |
| No CORS or hotlinking issues | Large data URIs delay rendering of the page |
| Ideal for tiny icons and placeholders | Harder to maintain and to update |
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
srcattributes, 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 thedownloadattribute still work. data:URLs have an opaque origin: scripts inside them cannot access the parent page.
Kommentare (0)
Fragen, Ideen oder ein Fehler in „Data URI“? Schreib einen Kommentar, bewerte das Tool oder antworte anderen.
Noch keine Kommentare. Teile als Erste(r) dein Feedback!