I went down this rabbit hole about 15 years ago, I ended up hand-rolling a transparent .gif which I think was 15 bytes? Small enough that we inlined it as cdata data urls. (Is that still a thing in HTML? It’s been so long…)
I use this embedded SVG for the logo on a page:
<img id="logo" src='data:image/svg+xml;utf8,%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2054%2050%22%20version%3D%221
I think I recall using a base64 encoded png at one point for a different project in the same way.
Minimizing bytes was not the reason for this. It was to tidy up the directory listing as this html was used as a self contained local file. I didn’t want a separate logo file hanging around and risk getting lost.
Instead, you can use a data URL, though you'll be wasting bytes specifying the mime type and base64 encoding the rest.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_...
The primary way we used it was as the body of a tracking gif, returned as binary. But we also used it as a spacer here and there inline in HTML using the data URI. When embedding in HTML the file size is mostly relevant for brevity.
Wow, that takes me way back.
EDIT: oh right, it was an XML/XHTML comment thing.