Hacker News Reader

Hacker News

Comment by saagarjha | Hacker News Reader

Parent Full thread

saagarjha

TIL you can render HTML from your address bar:

data:text/html, [Your HTML here]

View on HN

You can also render any format, including binaries, by base64 encoding the file contents.

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...

> The latter is extremely common for embedding static resources directly into HTML pages.

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.

> What's the benefit of this?

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.

[0] https://github.com/404

They can be embedded within a resource that is cached (e.g., an HTML page or CSS stylesheet).

For an example, see the SVG icons embedded in this CSS: https://fsfw-dresden.de/theme/css/fsfw.css (search for ".logo-twitter", for example)

True; I guess they're then beneficial if the resource is only ever used on that one page.

It's very common to do as part of a compiling/deploying step, for shared files like css or js, very rarely done manually (maybe for very very small icons).

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.

It means you can do wacky stuff like this: http://www.p01.org/defender_of_the_favicon/

Reply on news.ycombinator.com