When should I use Data URI?

Question

Date URI is that feature that allows me to place small images inline in CSS or HTML to reduce the number of requests. It is an alternative to CSS Sprite.

I did some tests here and I really liked the performance.

My question is about compatibility. Can I use it fearlessly? Do all browsers/platforms support it? I ask on both desktop and mobile.

Answer 1

Rapid Response

Data URI is not supported in Internet Explorer from version 5 to 7. In Internet Explorer 8 there is a limit of 32768 Bytes (32 KB).

For everything else, you won’t have a compatibility problem.

Elaborate Answer

The use of Data URI brings a number of concerns not only regarding compatibility, but also performance and maintenance.

As you mentioned in CSS Sprite, below follows a list of advantages and disadvantages compared to Data Uris when the contents are images.

Upside

The big advantage is in saving HTTP Requests that the fewer pages are made more quickly the page will be made available to the visitor.

On the other hand, Data Uris are not limited to images, they can be used for many other things.

Disadvantages

• Compatibility

  Nowadays there are no major disadvantages regarding compatibility, only Internet Explorer in its older versions fails to support Data URI:

  • Data URI is not supported in Internet Explorer from version 5 to 7.
  • In Internet Explorer 8 there is a limit of 32768 Bytes (32 KB) relative to the size of the Data URI in use.
  • When browsing secure links such as HTTPS, one way to avoid the security alerts given by the browser due to the safe and unsecured content on the page is to use Data Uris where the contents follow with the document on the secure link.

• Performance

  The size of the content provided via Data URI is slightly higher when compared to the same content to be provided via a SRC (image example). This obviously brings performance issues in relation to downloads that are made to make the page available to the visitor.

  • Peter Mclachlan in July 2013 published an article entitled:

    On Mobile, Data Uris are 6x Slower than Source Linking (New Research) ^(English)

    In the article above we can observe that the weight of the contents via Data URI becomes significantly slower when we have a high use of them:

    ...when Measuring the performance of hundreds of thousands of mobile page views, that loading images using a data URI is on Average 6x slower than using a Binary source link such as an img tag with an src attribute!

    That translated:

    ... when measuring the performance of hundreds of thousands of page views for mobile devices, uploading images via Data URI is on average 6x slower than a binary source link, such as an img tag with a src attribute!

  • Data Uris does not provide a name to the file, the visitor suffers from this scenario because they cannot save the image if they provide a name to it.

  • By referencing the same image several times, in Data URI we are effectively having multiple copies of the same image whereas an image via SRC can be referenced multiple times but is only downloaded and read once.

• Maintenance

  The big problem in the use of Data URI is the maintenance of the page and/ or updating its contents:

  • Data Uris are difficult to maintain/update when compared to simply replacing a file (example of an image).

    One can always resort to techniques to deal with this issue as is the case of those who use PHP to generate the stylesheet (css):

    <?php
     // data URI da imagem folder16.gif
     echo base64_encode(file_get_contents("../images/folder16.gif"));
    ?>
    

  • The contents cache via Data URI is the same as the document where they are inserted. This forces you to download style sheets more often due to image updating, resulting in increased work with regard to cache control.

---

Summary

The use of Data URI for small images or other static content as an icon or logo of the site is advantageous to reduce the number of HTTP Requests thus optimising the availability of the page.

Already for content images or other type of information subject to changes, Data URI will bring more problems than solutions being preferable to make content available in its "native form".

---

Elaborate response collecting key topics from the following articles:

• Wikipedia Data URI Scheme - Advantages - Disadvantages
• CSS-Tricks: Data Uris