How to use
- Type the text or choose the file you want to embed.
- Check or enter the MIME type, such as image/png or image/svg+xml, and choose Base64 or percent-encoding.
- Copy the generated data URI into your HTML, CSS or JSON.
- To inspect an existing data URI, paste it into the parser to see its MIME type, charset, size and a preview, and download the embedded file.
Data URI syntax
A data URI, defined in RFC 2397, carries a small file inside the URL itself:
data:[<mediatype>][;base64],<data>
data:text/plain;charset=UTF-8,Hello%20world
data:image/png;base64,iVBORw0KGgo...The media type tells the browser how to interpret the data; when it is left out, text/plain;charset=US-ASCII is assumed. The ;base64 flag means that the part after the comma is Base64. Without it, the data is plain text in which special characters are percent-encoded.
Base64 or percent-encoding
Base64 is the right choice for binary files such as PNG, JPEG, WebP, fonts and PDFs. It always adds about 33%. For text formats, percent-encoding is often smaller, because most characters stay as they are and only a few, such as <, >, #, % and double quotes, need escaping. That makes it a good fit for SVG icons, and the readable result also compresses better with gzip or Brotli. Each byte of non-ASCII text, however, becomes three characters, so for Chinese or Cyrillic text Base64 is usually shorter. When unsure, try both options and keep the shorter result.
/* Percent-encoded SVG in CSS: single quotes inside, # written as %23 */
.dot { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='4' fill='%23f60'/%3E%3C/svg%3E"); }When inlining pays off
A data URI saves an HTTP request, but the data becomes part of the document that contains it:
- No separate caching. An image inlined in HTML is downloaded again with every page. One inlined in a stylesheet is cached with that file, and changing it invalidates the whole stylesheet.
- Slower first render. Large data URIs in CSS delay rendering, because the browser has to download and parse the entire stylesheet first.
- Size overhead. Base64 adds a third, only partly recovered by compressing the HTML or CSS.
With HTTP/2 and HTTP/3 extra requests are cheap, so inline only small assets of a few kilobytes, such as icons, tiny placeholders or a critical background, and serve everything else as normal files. Sites with a Content Security Policy must allow data: in img-src or font-src for inlined images and fonts to load.
Frequently asked questions
Is there a size limit for data URIs?
RFC 2397 sets no limit, and modern browsers accept data URIs of several megabytes in images and stylesheets. Large ones are still a poor idea: they bloat the page, cannot be cached separately and take longer to parse.
Why does a data URI not open when I click a link to it?
Most browsers block web pages from navigating the main window to a data: URL, as a protection against phishing. Use data URIs inside images, CSS or download links, or paste the URI into the parser here to preview it and download the content.
How do I use a data URI in HTML and CSS?
<img src="data:image/png;base64,..."> in HTML, or background-image: url("data:image/svg+xml,...") in CSS. Quote the value in CSS, especially for percent-encoded SVG.Do I need to specify a charset?
text/plain or text/html that contain non-ASCII characters, yes: add ;charset=UTF-8 after the media type, otherwise the US-ASCII default may garble them. Binary types such as image/png need no charset.