Embedding Images with Data URIs


You can embed an image directly into an HTML document with data URIs. You don’t need a link to an external document. In HTML, you use the img tag with the src attribute.

Why would you do this? First of all it saves HTTP requests, making the page load faster.

You will need to convert your image to a series of codes that make no sense to humans but that the browser understands. With HTML, here is an example of it. I didn’t include all of the gibberish code in the example.

<img width="16" height="16" alt="star" src="data:image/gif;base64,R0lGODlhEAAQA.........

Here is an article called Data URIs on the web that explains this concept. It’s over at css-tricks.com.

On-line Image Converter

You can get the codes for your images by using an image converter over at Web Semantics in the article Image to data-URI Converter. They have a drag and drop feature.