8

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?

Improve this question
5
  • You can look for base64 encoding feature in server side scripting language, or you can find some website that allows you to upload a file and returns you the base64 encoding of the image. There is also the meta data string (data:image/png;base64,) that you need to use some MIME detection function to get the MIME type.
    – nhahtdh
    Commented Jun 8, 2012 at 2:29
  • @Lynda: What are you trying to accomplish? Do you have an image file that you want to convert to a data URI (fairly easy: follow link in the Wikipedia article to read about "base64")? Maybe you have an array of raw pixels that you want to convert to a data URI (significantly harder). Something else?
    – Managu
    Commented Jun 8, 2012 at 2:45
  • @Lynda: Also, when you say "I have seen websites that will do this for you, how can I do it myself?" What part of using the website is it that you object to? Are you looking to learn how to write a program to create data URIs? Maybe instead you don't want to send your image over the network for the conversion, and so just want a standalone local program to do the conversion?
    – Managu
    Commented Jun 8, 2012 at 2:49
  • @Managu - I am more curious than anything but I have a few places where I might benefit. Also the issue with websites is the first few I went to were blocked warning of possible malware. A standalone program would not be bad, I am not looking to write a program.
    – L84
    Commented Jun 8, 2012 at 5:02
  • I used this site. worked fine enter link description here
    – MemeDeveloper
    Commented Mar 7, 2013 at 9:50

3 Answers 3

Reset to default
8

Here's a cool way to do it for images when viewed in Google Chrome:

  1. Right-click the image in question and choose Inspect Element
  2. Right-click the image's URL (the cursor will turn into a hand) and choose Open link in Resources Panel
  3. Right-click the image in the Resources Panel and choose Copy image as Data URL
  4. Paste the Data URI wherever you need it
Improve this answer
1
  • Nowaday the Open link in Resources Panel is named Reveal in Sources Panel
    – alansiqueira27
    Commented May 22, 2023 at 12:50
3

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.

Improve this answer
1
  • This explains the Data URI concept well.
    – Inder
    Commented Mar 10, 2022 at 17:21
1

(I can not comment yet, so I am adding this as a new answer.)

Similar to Oran D. Lord's answer, this should work in Firefox:

  1. Open the image file in Firefox (or open a web page with the image).
  2. Right-click the image and choose "Inspect Element".
  3. In the Inspector, the image tag should now be highlighted. Right-click the image tag and and choose "Copy Image Data-URL" (even though it may not really be a URL, that is what the menu entry is currently called).
  4. Paste the Data URI wherever you need it.
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.