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.
Комментарии (0)
Есть вопросы, идеи или нашли ошибку в «Data URI»? Оставьте комментарий, оцените инструмент или ответьте другим.
Комментариев пока нет. Станьте первым, кто поделится отзывом!