Data URIs can be used in your CSS files or inside HTML tags which saves the browser from having to make additional HTTP requests for the external resources, and can therefore increase page loading speed. Look at this image below, it is embeded into this page:
Normally, to display an image on your website you have to link to an external image file using the <img> element in HTML like this:
<img src="https://2.bp.blogspot.com/-U-ULPxt1lnk/V8JOcOAMvCI/AAAAAAAAOiU/YktrHe-n3sMNztSYe-FaIqrc2RKqakArQCLcB/s1600/favicon.gif" />
When using a Data URI inside an image tag:
<img src="data:image/gif;base64,R0lGODdhEAAQAPUAAAQCBISChERCRMzKzBwiHKymrOTm5AwSDGxqbDQyNFRSVLS2tNze3PT29BwWHAQKBJSWlERKRCwqLMzSzDw6PIyKjCwmLKyurLy+vPz+/BweHFROVAwGDCQiJOzu7BQSFDw2PGReZLy6vPz6/AwKDExKTNTS1AQGBISGhERGRMzOzHx6fDQ2NFRWVLS6tOTi5PT69BwaHJyanCwuLDw+PIyOjLSytCQeJCQmJPTy9BQWFAwODExOTNTW1AAAAAAAACwAAAAAEAAQAAAGpcDMINXR3IxIZIthkgAOn50jGY3yeBWRTZsilVzbcOlxyZiFjtL53MX1RgFDBkTLFAyGxYgSNWVqOS84CTIhHgYIEE43b2Y2UicJDR4zHEh+fg0bOhogkywxRRp+PCJ/UhSfnH0ZChgZCFI4qqIvQhkGlRoVI3BGAIaTLy1WHr25oRItKTwWVZ0RJUQaIgRPUaJUJ2o2CVQEVBQ9thi6yasfAgwwQQA7" />
To use an image as a CSS background, CSS code will be like this:
background-image: url("https://2.bp.blogspot.com/-U-ULPxt1lnk/V8JOcOAMvCI/AAAAAAAAOiU/YktrHe-n3sMNztSYe-FaIqrc2RKqakArQCLcB/s1600/favicon.gif");
When using a Data URI as a CSS Background:
background-image: url("data:image/gif;base64,R0lGODdhEAAQAPUAAAQCBISChERCRMzKzBwiHKymrOTm5AwSDGxqbDQyNFRSVLS2tNze3PT29BwWHAQKBJSWlERKRCwqLMzSzDw6PIyKjCwmLKyurLy+vPz+/BweHFROVAwGDCQiJOzu7BQSFDw2PGReZLy6vPz6/AwKDExKTNTS1AQGBISGhERGRMzOzHx6fDQ2NFRWVLS6tOTi5PT69BwaHJyanCwuLDw+PIyOjLSytCQeJCQmJPTy9BQWFAwODExOTNTW1AAAAAAAACwAAAAAEAAQAAAGpcDMINXR3IxIZIthkgAOn50jGY3yeBWRTZsilVzbcOlxyZiFjtL53MX1RgFDBkTLFAyGxYgSNWVqOS84CTIhHgYIEE43b2Y2UicJDR4zHEh+fg0bOhogkywxRRp+PCJ/UhSfnH0ZChgZCFI4qqIvQhkGlRoVI3BGAIaTLy1WHr25oRItKTwWVZ0RJUQaIgRPUaJUJ2o2CVQEVBQ9thi6yasfAgwwQQA7");
How do you get a Data URI for an image?
There are many online tools to generate Data URIs. Use this Data URL Maker Tool. It's a drag and drop one.