How to Generate a Data URI

I recently came across Data URI scheme and was reading about it on Wikipedia.

Example code looks something like this:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
          AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
          9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

My question is this: How do you generate the code (IE: iVBORw0KGgoAAAA...) for using on a website?

Note: I am specifically looking for how this is done with no server side scripts. But you can still post server side script ways for others who may come across this question. Also I have seen websites that will do this for you, how can I do it myself?

image-processing data-uri image-conversion

Edit Report

1 Answer

If it's not clear from the Wikipedia article, a Data URI is just a way of shoving the entire contents of a file (say, a png) into a text link. Since many interesting types of files contain data that's not represented as text, the scheme uses the base64 encoding to represent the full spectrum of possible binary data in a textual format.

In addition, when a browser retrieves a file from a web server, the web server tells the browser what type of file it is, in the form of a MIME type. Since a data URI doesn't have a web server (or even a filename!) to identify the type of file, this information must be included in the URI.

answered 2012-06-08T05:24:22.010

How to Generate a Data URI

1 Answer

Your Answer