Data URI

Data URI is a URI scheme that allows to embed any kind of data into HTML pages (that is, instead of specifying the URL of the file, you can insert the contents of the file). For example, thanks to it, you can embed images into an HTML page as if they are loaded from an external resource. Nevertheless, since the images are stored “internally”, the browser does not need to make any additional HTTP requests to load them.

The data URI scheme was defined by RFC 2397 in August 1998. According to that document, it accepts values in both percent-encoded and Base64 encoded. However, to embed binary data into text document you should encode it to Base64. Therefore, I provide here only the following syntax:

data:<mime>;base64,<b64>

where:

• <mime> is the media type of the original data
• <b64> is the result of Base64 encoded data

For example, using the Base64 image encoder, a one-pixel red dot GIF image becomes:

data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs

Next, we can use the string above as src of the <img> tag:

<img src="data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs" />

Or as value of the background-image CSS property:

background-image:url("data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs")

More information about examples above can be found on the following pages: CSS and HTML. Furthermore, you can use the data URI string as a regular URL: just paste it into the address bar of your browser and press Enter — as a result you’ll see a one-pixel red dot image (well, it is very small, so watch attentively).

What are the pros and cons of using Base64 encoded data URIs?

Since data URI has its advantages and disadvantages, as well as gray magic, it can be harmful if not used wisely. So read carefully what you get by using Base64 encoded data URIs on HTML pages.

• pros:
  1. Speeds up page loading, because the browser will not be limited by the maximum number of concurrent HTTP requests.
  2. Reduces the server load, since the browser makes only one HTTP request. As result, the server can simultaneously serve more clients.
  3. Provides a simple hotlinking protection since no one can embed images onto their pages directly from your server.
  4. Makes pages independent of external files, allowing you to easily share them even offline.
  5. Improves performance (preliminary tests showed that the browser requires less CPU).
• cons:
  1. The size of the Base64 encoded data grows by 33%.
  2. Even on minimal page changes, the browser must re-cache and reload all images.
  3. Difficult image editing, because you first need to decode the Base64 string.
  4. It is more difficult to debug, especially that Base64 strings are very long.
  5. Ignores user settings who have disabled images to save Internet bandwidth usage.
  6. It always takes up space even if images are not used on the current page.
  7. Unlike images, stylesheets block the webpage rendering.

When to use data URI scheme?

You can practically use data URIs in any project, but this does not mean that you need to do this. Of course, it all depends on what you need, but the following examples show when you are welcome to embed binary files via data URI.

• Binary file is very small (for example, a 1x1 image).
• Image is used on all pages (for example, as background image).
• You develop a single-page application designed to run offline.
• Files containing Base64 encoded data are rarely updated.
• The necessary files are encoded when deployed in a production environment.

Who use data URIs?

In order to assess the popularity of a technology, you need to analyze what others are doing (especially the “big guys”). That is why I analyzed the first 20 websites according to the Alexa Top 500 and I specified the list of used media types for each website that embeds data via data URIs. Please note, that since I analyzed only home pages with a parser that doesn’t support JavaScript, I may have missed some websites or media types. In any case, at least 20 of the 20 largest sites use data URIs, so obviously it is not a bad idea.

• google.com (image/gif, image/jpg, image/png)
• youtube.com (text/javascript, image/gif, image/png, application/x-mpegurl, image/svg+xml)
• facebook.com (text/css, application/x-font-woff, font/opentype)
• baidu.com (image/png, image/jpeg, image/gif, image/svg+xml)
• wikipedia.org (image/svg+xml, image/png)
• qq.com (image/png, application/x-silverlight, text/html, text/plain, image/webp)
• taobao.com (image/png, image/gif, image/svg+xml, image/webp)
• yahoo.com (image/png, image/svg+xml, image/gif)
• tmall.com (image/gif, image/jpeg, image/png, image/webp)
• amazon.com (image/gif, image/png, image/svg+xml)
• google.co.in (image/gif, image/jpg, image/png)
• twitter.com (image/gif, image/png)
• sohu.com (image/png, application/x-font-ttf, application/font-woff, image/svg+xml, image/gif, application/json, image/jpeg, image/webp)
• live.com (application/json, image/gif, image/png, application/font-woff)
• jd.com (image/png, image/webp, application/json)
• instagram.com (image/png)
• weibo.com (application/font-woff, image/svg+xml)
• sina.com.cn (image/webp)
• vk.com (image/svg+xml, font/woff, audio/wav, text/css)
• reddit.com (image/png)

Which browsers support data URI scheme?

According to Caniuse.com, by and large the URI data scheme is supported by 96% of users from all over the world. For example, Base64 encoded images embedded in CSS via data URI scheme are supported by the following browsers:

• Chrome 4+
• Edge 12+
• Firefox 2+
• Internet Explorer 8+
• Opera 10+
• Safari 3.1+

How to use data URI correctly and is it worth it at all?

You should carefully weigh the advantages and disadvantages of the data URI scheme and, if necessary, consult with other developers who have experience with it. Remember that there is no universal advice and it all depends on the specific project. If you are not sure, perhaps it is better not to use it. If you bother that the size will become larger — use it only for files with a size less than 500 bytes. In addition, I have prepared additional reading material for you that can help you make the right decision:

• Gzip is the best friend of the data URI
• CSS Sprites and data URI are not enemies