Data URI Scheme: Alternative to CSS sprites?

Data URI is one of the most popular terms among the web developers but still there is a lot of confusion and misunderstanding about this topic. So as to give you a basic overview of this latest technique; today I am going to put a spotlight on the topic ‘data URI Scheme : Alternative to CSS sprites?’.

What actually Data URI Scheme is?    Different experts purpose different definition about this term but in simple words Data URI Scheme is a course of action in which the image or any external source file is directly entrenched into an HTML or CSS file. The Data URI scheme was defined in RFC 2397 of the IETF. The data URI scheme effectively reduces the URL traffic or HTTP requests of your page and makes it really fast as compared to the conventional loading.

Why to use Data URI Scheme; when we have CSS Sprites?

You all must be aware about the CSS Sprites; but for the non-tech readers let me give a brief overview of the subject. CSS Sprite is a technique of merging different images into a single image; and then fetching the required image from it at a time. This process reduces the HTTP requests as the browser only need to load a single image. But now the question arises that why to use the Data URI scheme; when we have a simple technique of CSS sprites?

Although CSS Sprite images reduce the HTTP requests to a great extent but it still requires an additional HTTP request (of the integrated image) beside with its overhead TCP connection. So as to even diminish this additional request; we can directly merge the source file or image into the HTML or CSS file and that’s what we call ‘Data URI Scheme’.

Difference between URI and URL?

Beside with the spell; URI and URL are almost similar in the definition BUT not SAME. I visited a couple of posts and I found the same mistake among most of those posts; they had declared URI and URL as one but it is not the fact.

URL which means Uniform Resource Locator is a combined procedure of two tasks :-

=> The Address at which the data exists.
=> Procedure to execute that given data.

Whatever you saw on the internet whether it is a small icon, a large blog, a video, song and EVERYTHING else have a URL. You are reading this blog just because your web browser is reading the URL of this web page that’s the magic of URL.

The URI refers to Uniform Resource Identifier. A URI contains the additional information for a specific protocol; if this special information is an address of the protocol that the URI could also be called a URL.

So I can conclude that ‘Every URL is a URI but every URI may or may not be an URL’.

Let me give you an example of this ‘HTTP request compressor magic’. Below is a code by which you can negotiate a directory for CSS files with URL image reference. Simply Download these images, encode them carefully, inject the encoded image back into the CSS file and experience the magic.

Format of Data URI

Format of the Data URI is a simple algorithm as per provided by the RFC 2397.

This format of the Data Uri scheme is an embedded form of different parts. The first part i.e ‘data:’ indicates the protocol of the data. Here it represents that this a data URI. The second part of this format is the ‘MIME type’ ; this represents the type of data being integrated. For example; if we want to represent a JPEG image than this part will be written as image/JPEG and if we didn’t specify any MIME type then it will be default to ‘text/plain’. The next part of ‘Charset’ is declared as null for all image types and is frequently omitted in the others too. The next part of the code describes the coding used ; here base 64 is being used that makes the encoded data much smaller as compared to the conventional coding scheme. The last part in the format of Data URI i.e ‘encoded data’ hold the white space and comments for the scheme.

Browser Compatibility

This latest technology is being adopted by most of the latest versions of browsers but some of the previous versions are not compatible with this platform. So to provide you the ease to select the most appropriate browser; I am providing you a picture description that comprises of data URI compatibility for major browsers.

Browser Compatibility Stats

I hope that you now would be sure regarding the difference between URI Scheme and CSS Sprites. If you find some other basic points which are not covered in this post; then please let me know in the comments. I will really love to hear your reviews about my this post on “Data URI Scheme : Alternative to CSS sprites?”.

Christiana McGee

Christiana McGee loves development and possesses specialization in converting Sketch to HTML. Associated with CSSChopper - Sketch to HTML Company, she constantly strives to serve the best, fastest and innovative solutions in a stre