Ruslan Ulanov’s Codeshack

The developer’s notebook

data Protocol – embed your data

leave a comment

Recently, looking for a completely unrelated subject I discovered that IE8 now supports the data protocol.

What is a data protocol?

In a few words, it’s a way to embed any data (like GIF images, for example) into text documents such as HTML or CSS. So, instead of linking to an external file, you can do something like this:

HTML

<IMG
SRC='data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAA wAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfz gFzByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiO Spa/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZ eGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uisF81  M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7'
ALT='Larry'>

The data protocol is not something new, it is dated all the way back to 1995, when it was proposed. And in 1998 it became known as RFC2397.

The following elements and/or attributes could make a use of the data protocol:

  • object (images only)
  • img
  • input type=image
  • link
  • CSS declarations that accept a URL, such as background, backgroundImage, and so on.

Let’s look at some examples:

CSS

.img { background: url(data:image/png;base64,iVBORw0KGgoAAAANSU hEUgAAAAIAAAACCAIAAAD91JpzAAAABnRSTlMAAAAAAABupgeRAAAABmJLR0QA%2FwD %2FAP%2BgvaeTAAAAEUlEQVR42mP4%2F58BCv7%2FZwAAHfAD%2FabwPj4AAAAASUVO RK5CYII%3D) fixed 1px 0; }

JS

var img = new Image();
img.style.width = '100px';
img.style.height = '100px';
img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCA IAAAD91JpzAAAABnRSTlMAAAAAAABupgeRAAAABmJLR0QA%2FwD%2FAP%2BgvaeTAAA AEUlEQVR42mP4%2F58BCv7%2FZwAAHfAD%2FabwPj4AAAAASUVORK5CYII%3D';
document.all.myBody.appendChild(img);

Why would you want to use a data protocol?

The most obvious reason could be the portability.

You might be familiar with the Greasemonkey add-on to Firefox and some other browsers. It allows you to write small bits of JavaScript to customize web pages with new features or change the look of the entire site alltogether. For example, you could write a script to add “Download” button to every movie on YouTube site. To make this button look like it “was there” you could create a little image and apply it to the button with a style. That image could be embedded in your JS file with a data protocol. This way you wouldn’t have to worry about packaging all your files in a ZIP archive and unpackaging them in the right location on the target system. All you have to download is a single JS file. Great, isn’t it?

P.S.

Please note that there are some limitations to keep in mind when dealing with data protocol. First, RFC1866 limits lengths of some attributes to 1024 characters, so if base64 encoded string is too long the object might appear broken in the browser. Second, to be on a safe side try to keep the entire base64 string on one line. Splitting it with line break/carriage return characters might break the data.

Also, most modern browsers (such as Firefox, Safari and Chrome) would support data protocol, but IE7 and older will not, so you might want to provide some alternative for the older browsers.

For more information visit the following sites:

Written by Ruslan Ulanov

July 8th, 2009 at 2:31 pm

Posted in CSS,HTML

Tagged with