3 ms·
Data URI Generator via Drag and Drop
- dexen 15y agoI love the clean design. Focus on the functionality, branding below, concise explanations of what's what. 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).
- Liu 15y agoCan someone please give a few examples for what this could be used for?
- dexen 15y agoWikipedia has some: http://en.wikipedia.org/wiki/Data_Uri#Examples http://en.wikipedia.org/wiki/Data_Uri#Examples
- sp332 15y agoIf 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.
- ComputerGuru 15y agoDoesn't work in Chrome on OS X. I get the name of the file and no URI. Worked in FF5, though.
- rufibarbatus 15y agoScroll 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.