4 ms·

> 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

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

Xophmeister 9y ago
They can be embedded within a resource that is cached (e.g., an HTML page or CSS stylesheet).
- oneeyedpigeon 9y ago
  True; I guess they're then beneficial if the resource is only ever used on that one page.
- majewsky 9y ago
  For an example, see the SVG icons embedded in this CSS: https://fsfw-dresden.de/theme/css/fsfw.css https://fsfw-dresden.de/theme/css/fsfw.css (search for ".logo-twitter", for example)
lucideer 9y ago
> 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 https://github.com/404
kgbier 9y ago
It means you can do wacky stuff like this: http://www.p01.org/defender_of_the_favicon/ http://www.p01.org/defender_of_the_favicon/
DiThi 9y ago
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.

Xophmeister 9y ago

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

oneeyedpigeon 9y ago
True; I guess they're then beneficial if the resource is only ever used on that one page.
majewsky 9y ago
For an example, see the SVG icons embedded in this CSS: https://fsfw-dresden.de/theme/css/fsfw.css https://fsfw-dresden.de/theme/css/fsfw.css (search for ".logo-twitter", for example)

lucideer 9y ago

> 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 https://github.com/404

kgbier 9y ago

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

DiThi 9y ago

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.