Data URI is that feature that allows me to put small inline images in CSS or HTML to reduce the number of requests. It's an alternative to the CSS Sprite.
I did some testing here and I really enjoyed the performance.
My question is about compatibility. Can I use it without fear? Do all browsers / platforms support it? I ask both on desktop and on mobile.
Data URI is not supported in Internet Explorer from version 5 through to 7. In Internet Explorer 8 there is a limit of 32768 bytes (32 KB).
For everything else, you will not have any compatibility issues.
The use of Data URI entails a number of concerns regarding compatibility, performance and maintenance as well.
As you said in CSS Sprite, below is a list of advantages and disadvantages to Data URIs when their contents are images.
The great advantage is in the HTTP Requests savings that the fewer the faster the page is made available to the visitor.
On the other hand, Data URIs are not limited to images, they can be used for many other things.
Compatibility
Nowadays there are no major disadvantages regarding compatibility, only Internet Explorer in its older versions fails to support Data URI:
Performance
The size of the content provided via Data URI is slightly higher when compared to the same content to be provided through an SRC (example of images). This obviously brings performance issues to the 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 the data URI is on average 6x slower than using a binary source link such as an img tag with an src attribute! >
What translated:
... by measuring the performance of hundreds of thousands of mobile page views, loading images through Data URI is on average 6x slower than a binary source link, such as an img tag with a src attribute!
Date URIs do not give a file a name, the visitor suffers from this scenario because they can not save the image if they give it a name.
When referencing the same image several times, in Data URI we are actually 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 main problem in using Data URI is in maintaining 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).
You can always use techniques to deal with this issue as is the case of who uses PHP to generate style sheets (css):
<?php
// data URI da imagem folder16.gif
echo base64_encode(file_get_contents("../images/folder16.gif"));
?>
The content cache via Data URI is the same as the document where the contents are inserted. This causes more style sheets to be unloaded due to image refresh, resulting in more work on cache control.
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 optimizing page availability.
For content images or other information subject to change, Data URI will bring more problems than solutions and it is preferable to make the content available in its "native" form.
Answer elaborated by collecting key topics from the following articles: