DataURL.net

What are Data URLs?

Data URLs are a Uniform Resource Identifier scheme that allow you to include data items inline in a web page as if they were being referenced as external resources. 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.

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.

What do Data URLs look like?

Data URLs use the following syntax:

data:[mimetype][;base64],[data]

Let's say we have a small file icon image we want to embed in an HTML document. In that case,we would specify a mime type identifying the image (in this case, a GIF image) followed by the base64-encoded file data:

<img width="11" height="14" src="data:image/gif;base64,R0lGOD lhCwAOAMQfAP////7+/vj4+Hh4eHd3d/v7+/Dw8HV1dfLy8ubm5vX19e3t7fr 6+nl5edra2nZ2dnx8fMHBwYODg/b29np6eujo6JGRkeHh4eTk5LCwsN3d3dfX 13Jycp2dnevr6////yH5BAEAAB8ALAAAAAALAA4AAAVq4NFw1DNAX/o9imAsB tKpxKRd1+YEWUoIiUoiEWEAApIDMLGoRCyWiKThenkwDgeGMiggDLEXQkDoTh CKNLpQDgjeAsY7MHgECgx8YR8oHwNHfwADBACGh4EDA4iGAYAEBAcQIg0Dk gcEIQA7" alt="File Icon">

This HTML tag would display the following image:

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.

Browser support

Data URIs are currently supported by the following web browsers:

• Firefox and all browsers that use the Mozilla Foundation's Gecko rendering engine
• Safari, Chrome and other WebKit-based browsers
• Opera
• Konqueror
• Internet Explorer 8+ (with certain limitations)

Maintainers

The Data URL Toolkit project, which this website is part of, was developed and is currently maintained by Sveinbjorn Thordarson <sveinbjornt __at__ gmail>.