A Data URL is a URI scheme that provides a way to inline data in a document, and it's commonly used to embed images in HTML and CSS. Data URLs are a form of Uniform Resource Locators, although they do not in fact remotely locate anything. Instead, the resource data is contained within the URL string itself as a base64-encoded string. This saves the browser from having to make additional HTTP requests for the external resources, and can thus increase page loading speed.
Data URLs use the following syntax:
data:[mimetype][;base64],[data]
History
The data URL scheme was defined in RFC 2397 specification of the Internet Engineering Task Force. Although the IETF published the Data URL specification in 1998, it was never formally adopted as a standard. However, the HTML 4.01 specification references the data URI scheme through which Data URLs are implemented, and after years of neglect, support for Data URLs in some form or another has now been implemented in all modern browsers, including Internet Explorer 8.
How does a Data URL look
A Data URL is a string that starts with data: followed by the MIME type format. For example a PNG image has mime type image/png, then it is followed by a comma and then by the actual data.
Text is usually transferred in plain text, while binary data is usually base64 encoded.
Here is an example of how such Data URL will look like in real (in this case a PNG image):
<img src="data:image/png,%89PNG%0D%0A..." />
Here is how a base64 encoded Data URL looks like. Notice it starts with data:image/png;base64:
<img src="data:image/png;base64,iVBORw0KGgoAA..." />
Data URLs can be used anywhere a URL can be used, as you saw you can use it for links, but it’s also common to use them in CSS:
.main {
background-image url('data:image/png;base64,iVBORw0KGgoAA...');
}
Advantages of Data URLs
Using Data URLs for the web can have several advantages:
Data URLs save HTTP requests
Data URLs can reduce the number of HTTP requests the browser needs to make to display an HTML document. Since the data is contained within the URL instead of being located in an external resource, no HTTP request needs to be made to display the content. Web browsers are typically configured to use somewhere between two and eight connections to a webserver at any given time.
Minimizing the number of browser requests is an important component of optimizing web page loading times: Data URLs can thus have beneficial effects on performance.
Faster transfer of small files
For transferring small files, Data URLs can result in faster downloading. Data transfers via TCP start slowly, and each external resource starts a new TCP connection to the server. The transfer speed may thus be held back by the overhead of TCP communication.
Less bandwidth usage (in certain cases)
Data URLs use less bandwidth whenever the overhead of encoding the data as a Data URL is smaller than the overhead of an HTTP request. For example, the required base64 encoding for an image 600 bytes long would be 800 bytes, so if an HTTP request required more than 200 bytes of overhead, the data URI would be more efficient.
Faster HTTPS
HTTPS requests have much greater overhead than ordinary HTTP requests due to SSL encryption. If your website is served over HTTPS, providing resources via Data URLs can improve performance significantly.
Disadvantages of Data URLs
The use of Data URLs has several disadvantages which should be kept in mind:
Repeated occurences
Data URLs must repeat the string of data each time they are used within a document, so if the same resource is used multiple times, there will be increased bandwidth usage.
Caching
Data URLs cannot be cached separately from their containing documents. They must therefore be redownloaded every time the containing document is redownloaded. This means, for example, that if a browser reloads an HTML document containing Data URLs, it must redownload all the data of embedded resources.
Re-encoding for changes
Content must be re-encoded and re-embedded every time a change is made. The hassle this entails can be minimized by using some of the free software available on this website. However, you won't want to start using Data URLs until the development process for your website is complete.
No support in old versions of Internet Explorer
Internet Explorer versions prior to version 8 do not support Data URLs at all. There are several work-arounds for this, whereby you can gain the benefits of Data URLs for other browsers while serving older browsers traditional images.
Base64 encoding increases data size
Base64-encoded Data URLs are 33% larger in size than their binary counterparts. However, if you use gzip content encoding on your webserver, this is reduced to between 0-10%.
Size limitations
According to the Data URL specification, browsers need only support Data URLs up to 1024 bytes long. Most browsers, however, will accept much larger ones. Opera limits Data URLs to about 4100 characters, Firefox (Mozilla ) up to 100 KB, Internet Explorer about 32 KB, and WebKit (Safari) doesn't seem to have any limit at all. Typically, however, the benefits of using Data URLs disappear at with larger images, so they are best used only for small (~1-4KB) images.
Security
Data URLs can encode any kind of information, not just images, and so they come with their set of security implications.
Data URLs with CSS
Regarding Data URLs and caching, there is no denying that caching is an important factor in browser performance, because usually is a problem to get the Data URLs to enter the browser cache.
The answer to this problem is using Cascading Style Sheets. The url operator in CSS allows us to specify background images for elements, the browser doesn't care what kind of URL it is, as long as it is capable of getting the data therein.
It is thus possible to embed the Data URL-encoded images in an external stylesheet. Stylesheets are aggressively cached by all major browsers, for understandably performance reasons, even because on most sites CSS are quite large and includes usually even animations and transitions logics.
Let us imagine that we have a small div element that we wish to provide with a mild gray sideways-striped background, moderately popular amongst today's web designers. The typical approach is to create e.g. a 3x3 pixel image, save it as a small GIF or PNG image, and provide an URL to it in the background-image CSS attribute. Using a Data URL is an efficient and viable alternative, because we have to remember that using Data URLs will avoid to do an additional request for an external image (but do not rely on Data URLs for big images, as this will lead you to slower loading speed of the HTML page or resource).
Observe the following CSS class:
.striped_box
{
width: 100px;
height: 100px;
background-image: url("data:image/gif;base64,R0lGODlhAwADAIAAAP///8zMzCh2BAAAAAAALAAAAAADAAMAAAIEBHIJBQA7");
border: 1px solid gray;
padding: 10px;
}
We can then include the following in our HTML document:
<div class="striped_box"> Here is a happy striped box </div>
This produces the striped box with the background image specified into the CSS file into the striped_box.
In this case, the use of a Data URL is entirely beneficial. The overhead of an extra HTTP request is circumvented, the striped background image for the box is cached along with the rest of the CSS, and can be used again and again without the image being re-transferred repeatedly. Provided that the image is not too large, and that it is not repeatedly used within the CSS document, Data URLs can be a powerful tool to speed page loading times and to assure "availability" of that resource (in this case, an image).
 |