
Copy and paste the output into the "src" attribute of an image tag, or the background url of your CSS document.
By using the Data URI scheme you can embed images directly into your HTML and CSS. It works by encoding an image into a base64 string and place it directly with an HTML image tag or as a CSS background URL. The image below is encoded directly into the HTML on the page. View source to see how it works.
The benefits of encoding images to Base64 are similar to using an image sprite. You reduce file requests to one CSS document. While Base64 is generally easier to update than an image sprite, they tend to be a little large in file size.
It's generally advisable to put your common UI icons in base64 in your CSS, then let that whole chunk get cached by the browser. Those are usually clean vector icons as well, which seem to get compressed quite well.