Website Optimization using Data URI

Before thinking of optimizing website using data Uri, are you aware of Data URI? Data URI is a scheme using which allow including data inline on web page. For example image can be embedded in CSS or HTML file directly.

Data URI format for embedding resource directly on page:

data:[<MIME-type>][;charset=<encoding>][;base64],<data>

This can be used on any HTML page or on CSS file where style element can have URL(). I thought of using it for favicon.

Advantage of Data URI: Biggest advantage of Data URI is that it can save request response process. Browser make certain number of request to server and this can help reducing the page load time.

Disadvantages of Data URI: biggest disadvantage is you need to embed the base64 encoded data every time resource changes. This can be dealt with server side script outputting base64 data but still it adds overhead. Second big disadvantage is base64 data is bigger than binary data.

As, I am not using this Data URI and I am not feeling interested to do extra work of encoding image to base64, below are examples from CSS-Tricks. Anyway I was going to tell you about that for further reading.


li {
  background:
    url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)
    no-repeat
    left center;
  padding: 5px 0 5px 25px;
}
<img width="16" height="16" alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />

Data URI and Caching:

Data URI put data in the file. So, if data is in cached or cacheable file than it can save bandwidth in return load. What if you are using data URI in HTML file, where user will visit for once and then either quit or go to next page. If visitor choose to quit the site then no point anyway caching is not helpful here at least in this visit but if he choose to visit another page then DATA URI in HTML file gone waste. and visitor browser need to download the image data again. In case of image using <img/> browser can cache the image and on next visit on html page, browser can use that cached image. So, there are various pros and cons in using Data URI. Bing use external file data as inline data on first visit, and then using lazy loading it loads all data, so in next visit visitor's browser can use cached version of resources.

For more detailed discussion:
wikipedia.org
css-tricks.com
stevenbenner.com

Comments are open for an year period. Please, write here on Facebook page.