Why use a data URI scheme?

Question

Basically the question is in the title.

Many people have a question about how to create a data URI and problems with it.

My question is: why use a data URI?

What are the advantages:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" /> 

Things to do:

 <img src="dot.png" alt="Red dot" /> 

I understand that on the server side there is (possibly) less overhead, but what are the advantages / disadvantages of using real data URIs?

Answer 1

According to Wikipedia :

Benefits:

• HTTP request and header traffic are not required for embedded data, so data URIs consume less bandwidth whenever encoding overhead for embedded content as data URIs is less than HTTP overhead. For example, the required base64 encoding for a 600-byte image will be 800 bytes, so if an HTTP request requires more than 200 bytes of overhead data, the data URI will be more efficient.

• To transfer many small files (less than one kilobyte each), this can be faster. TCP transmissions usually start slowly. If a new TCP connection is required for each file, the transfer rate is limited by the rounding time and not by the available bandwidth. Using HTTP keep-live improves the situation, but cannot completely eliminate the bottleneck.

• When viewing a secure HTTPS website, a web browser typically requires that all elements of the web page load via secure connections, or the user will be notified of reduced security due to a combination of safe and insecure elements. On poorly configured servers, HTTPS requests have significant overhead compared to regular HTTP requests, so nesting data in a data URI can improve speed in this case.

• Web browsers are usually configured to create only a specific number (often two) of simultaneous HTTP connections to the domain, so inline data releases the connection for downloading for other content.

• An environment with limited or limited access to external resources can embed content when it is prohibited or impractical to link externally. For example, an extended HTML editing field could take an inserted or pasted image and convert it into a data URI to hide the complexity of external resources from the user. Alternatively, the browser can convert (encode) image-based data from the clipboard into a data URI and paste it into the HTML editing field. Mozilla Firefox 4 supports this functionality.

• You can manage your multimedia page as a single file. Email address message templates can contain images (for background or signature) without an image being an “application”.

Disadvantages:

• Data URIs are not separately cached from their containing documents (for example, CSS or HTML files), so the data is loaded every time the containing documents are reloaded. Content must be re-encoded and re-embedded each time a change occurs.

• Internet Explorer version 7 (approximately 15% of the market as of January 2011) does not have support. However, this can be overcome by serving specific browser content. Internet Explorer 8 limits data URIs to a maximum length of 32 KB.

• Data is included as a simple stream, and many processing environments (e.g. web browsers) may not support the use of containers (e.g. multipart / alternative or message / rfc822) to provide greater complexity such as metadata, data compression, or consistency content.

• Base64 encoded URIs that are 1/3 larger than their binary equivalent. (However, this overhead is reduced to 2-3% if the HTTP server compresses the response using gzip) The data URIs make it more difficult to protect content filtering software.

According to other sources , data URLs are much slower in mobile browsers.

Answer 2

Good use of data URIs allows you to download content that has been generated on the client side without resorting to a proxy server on the server side. Here is an example I can come up with:

• saving the output of the canvas element as an image.
• CSV format table load suggestion
• loading the results of any kind of online editor (text, image, CSS code ... etc.)

Answer 3

Basically, I find use of this if I cannot (for some reason) use CSS sprites , and I do not want to download every single small image that I will use for styling.

Or for some reason you do not want anyone to link an image from an external page. This can be achieved using other methodologies, but embedding also works.

Otherwise, I personally will not encode large images as photographs. It is better to have media on another server. A server that may not have all the software associated with the web server. Just delivery of carriers. It is much better to use resources.

Answer 4

I used the data URI scheme in several (C ++, Python) command line applications to generate reports that include data.

Having one file is quite convenient to send reports by e-mail (or move them as a whole). Compared to PDF, I don't need an extra library (other than base64 encoding), and I don't need to worry about page breaks (and I almost never need to print these reports). I usually don’t put these reports on a web server, I just browse them on the local file system with a browser.

Answer 5

I agree with BiAiB that the real value of the data URI makes the content available on the client side available for downloading files without any problems with the servers.

My blog post describes a working example of using a data URI to "provide table loading as CSV", some of the suggested improvements in HTTP are a cleaner and better way to deal with HTTP network speed issues.