Embed a base64-encoded image at the bottom of HTML file

Question

I have an HTML file like this:

<html>
<body>
<p>Some text...</p>
<img src="data:image/png;base64
<!-- Some really ugly base64 -->
">
<p>Some text...</p>
</body>
</html>

By default, a base64-encoded file really clutters an HTML document.
I am wondering, if there is a method to have an image that links to another place at the HTML file, rather than pasting the base64 directly between the important content, to improve readability in the raw file. I know, this is possible with some kind of JavaScript solution, but I would prefer not to use it.

I assume you have a pressing reason not to have the image in an external resource? Because that has so many advantages, readability of the HTML file being one of them. — Pekka, Jul 02 '15 at 15:00
Yes. I have a Markdown Document, that is converted to HTML. As Markdown supports HTML tags, there is no problem with embedding an tag. For simplification, I would like to have only one Markdown-File, without any (possibly breaking) dependencies — , Jul 02 '15 at 15:02

score 0 · Accepted Answer · edited May 23 '17 at 12:21

Inspired by this answer, it is possible to specify image contents via CSS using the all-purpose content attribute.

I do not know which browsers support this behaviour, although I strongly suspect most modern ones do.

Example modified from that answer:

<img src="#" class="myImage" />   

<style type="text/css">
    .myImage {
  content: url('data:image/gif;base64,R0lGODlhEAAQALMPAAAAAIAAAACAAICAAAAAgIAAgACAgMDAwICAgP8AAAD/AP//AAAA//8A/wD//////yH5BAEAAA8ALAAAAAAQABAAQAQ78EkJqp10LaB759sDVh4ZiqVVTqC3om6smVvcAmz74Zioz7zMRmfC/WTAGXI0Ws5gtc+HhXz2fJagJAIAOw==');
}

</style>

Placing style elements in the body is illegal in HTML4, and dubious in HTML 5. However, every browser I know of supports it.

Remember that having inline images in HTML documents comes with some massive downsides, most prominently impaired cacheability.

cacheability is not important in this case, as the document stays on the users hdd... thanks! — , Jul 02 '15 at 15:13

Embed a base64-encoded image at the bottom of HTML file

1 Answers1