data:text/html;base64,[Your base64 encoded HTML here]
data:image/png;base64,[Your image data here]
The latter is extremely common for embedding static resources directly into HTML pages. To the point there JS APIs the form obj.toDataURL()[0]
[0] https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasE...
What's the benefit of this? I get that it reduces the number of HTTP requests, but it also fails to cache the resources, so you're betting on the client never requesting that image again (and the client may be a proxy server, right?). It also makes a right mess of your markup, if that's something you care about.
Apart from Xophmeister's point about embedding within a cached resources, two other use-cases:
1. generated or dynamic resources - e.g. displaying an image from a file input before it's uploaded to a server
2. reliability - e.g. Github's 404 page[0] uses them to ensure the entire page source is standalone and works independently of other services/resources.
E.g. I use url-loader in webpack to do require('./some_image.png') and that's converted to a data URI if the image is small enough (otherwise I get a regular URI). The output is a .js file shared among all pages of the site.