DATAURL.NET is home to some open source tools for creating and working with Data URLs (RFC 2397).
Two of these tools are web-based and available here:
- Data URL Maker converts files to Data URLs.
- Data URL CSS Optimizer optimizes CSS files by embedding external images as Data URLs.
Various modules, code examples and GUI/command line tools for UNIX systems are available in Downloads.
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.
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:
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.
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.
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
- Internet Explorer 8+ (with certain limitations)
Data URL Maker
Data URL CSS Optimizer
Type in a URL below and the Data URL CSS optimizer will fetch your stylesheet and convert linked image resources into Data URLs.
Remote CSS URL
Base64-encode all images smaller than | Minify CSS | Optimize images (slow)
Downloads & Userful Links
- Data URL Toolkit on GitHub
This project's open source code repository on GitHub. Fork and have fun!
- Using Data URLs Effectively with Cascading Style Sheets
Old guide on optimizing with Data URLs.
Inline Images with Data URLs - embed graphics inline with data uri scheme
- Data URL Wikipedia Entry
Wikipedia entry on Data URIs.
- Data URIs Are Slow On Mobile