DURI.ME – A beautifully simple image-to-DataURI converter

duri.me - A beautifully simple image-to-DataURI converter.

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.

duri.me - A beautifully simple image-to-DataURI converter.


What are the disadvantages?

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

  • The size of the embedded code is 1/3 larger than the binary equivalent, however this can be reduced to 2-3% using gzip compression.
  • Internet Explorer 7 is not supported.
  • Internet Explorer 8 limits data URIs to a maximum lenght of 32KB.
  • Data URIs don’t carry a filename like a normal file.
  • Data URIs need to be re-enconded and re-embedded every time a change is made to the image.

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 🙂

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *