Data URI Generator via Drag and Drop

Scroll to the right. Some exotic CSS thing that happens when your data URL is simply way too long. Fixed in Chrome with:

  .dataurl {
      word-wrap: break-word;
      white-space: inherit !important;
  }

But that removes the scrolling altogether and replaces it with a box as tall as needed to support the data link.

EDIT: Just came back from the article explaining how this is done. Very simple and very, very clever.

Wikipedia has some: http://en.wikipedia.org/wiki/Data_Uri#Examples

If you put data (usually little icons) in a data: URI, the browser can load the image without having to make another request to the server for the image, because the data is right there in the URL. It doesn't have to touch the network or disk.

If you put that in an <image src=data://...> tag, it would be rendered inline just like a normal image. So that's the main advantage: the data is in the URI. It's usually used to reduce the number of requests made to the server for icon images.