Data URI Generator via Drag and Drop(datauri.com)
datauri.com
Data URI Generator via Drag and Drop
http://datauri.com/
3 comments
Doesn't work in Chrome on OS X. I get the name of the file and no URI. Worked in FF5, though.
Scroll to the right. Some exotic CSS thing that happens when your data URL is simply way too long. Fixed in Chrome with:
EDIT: Just came back from the article explaining how this is done. Very simple and very, very clever.
.dataurl {
word-wrap: break-word;
white-space: inherit !important;
}
EDIT: Just came back from the article explaining how this is done. Very simple and very, very clever.
Can someone please give a few examples for what this could be used for?
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.
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.
Wikipedia has some: http://en.wikipedia.org/wiki/Data_Uri#Examples
Thumbs up! :-)
You may want to explain the files aren't uploaded to server -- that they never leave the computer (security); you may also warn upon exceeding 32KB size (IE8 limit).