up one level
---
2015-04-28

HTML Base-64 Encode an Image to Make a Single HTML File which Contains the Text and Image

I’m really instantly amazed at, and loving, this ability to base-64 encode an image into an html file!

I first discovered this by desiring to find a file format that could save an entire blog post (text and photos) as a single file that is viewable by a web browser.

Using LibreOffice Writer I saved a text+image document in its “HTML Document (.html)” format, and lo and behold it saved it as a single .html file, which contained the text and image and is openable by three major web browsers (chrome, firefox and IE)

Then I googled and found this with some more extreme examples:
(not only images embedded but audio or video)
[ https://www.iandevlin.com/blog/2012/09/html5/html5-media-and-data-uri ]

The real application that I will immediately use this for is the one for which I searched when I found this. I will re-make all my wordpress blog posts from w̶i̶e̶l̶d̶l̶i̶n̶u̶x̶.̶c̶o̶m̶ as single .html files and post them as static files from apache. Thus circumvent WordPress entirely. Which is what I should have done in the first place for my blog!

Finally, pasted here is the entire html source of an html file with an embedded image:

*********************************
START OF source of entire html file with an embedded image
*********************************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title> </head> <body> <p>Hello, World! Image here:</p> <p><img src="data:image/png;base64,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"/></p> <p>That was the image above. The end.</p> </body> </html>
*********************************
END OF source of entire html file with an embedded image
*********************************

And *finally* finally, here’s a screenshot of what the web page looks like. (The web page created when the above html source is copied+pasted and saved in a file and then viewed in a web browser)
Screenshot:




[2019 edit: Moved to: https://i̶n̶v̶e̶s̶t̶o̶r̶w̶o̶r̶k̶e̶r̶.̶c̶o̶m̶/2015/... .html.]