What is a Data URI?

A Data URI is a Uniform Resource Identifier scheme that provides a way to include data (in Duri.me's case images) in-line in websites as if they were an external resource.

To put it simply, a Data URI is a base64 version of an image that is included in a file and is fetched in a single HTTP request, the one that downloads the site file.

What does that mean to me?

When you have an image that needs to be loaded fast, why would you link to an external file when you can have it load along with your page? This works when adding an image directly and when adding a background-image with CSS.

What are the advantages?

Among other reasons it is primarily to save HTTP requests. External requests are one of the main issues why pages take so long to load, and this makes it faster.

What are the disadvantages?

As expected, there are drawbacks to this approach. They are:

So, how do I use it?

This is the easiest part! You start by dragging an image to the drop area (clicking also works!) and then you press the "Generate Base-64 Code". After that, all you need to do is click the option you prefer and then simply paste the automatically copied code to it's proper place :)

Share duri.me with your friends

Follow duri.me on Twitter or Facebook

Duri.me on FacebookDuri.me on Twitter