HTML in-line image encoder

It is possible to include small images directly in a HTML document. That is: Instead of referring to an image file like myimage.jpg using <img src="myimage.jpg"> you can directly include the encoded image information in the HTML file. This is not faster or better in any way but it has the advantage that you have only one file. It is easy to manage this if you want to give it to somebody. Instead saying "save this HTML file and the images in one folder" you say "here is the HTML file" and it is totally self-contained. I use this e.g in web based javascript calculators that contain as well small icons or small black and white drawings.

This page uses the javascipt FileReader() interface and may only work with a recent version of firefox or google-chrome.

The generated img tag will look like this: <img src="data:image/gif;base64,ImageAsBase64Data">

File:







This javascript based encoder limits the size of the images to about 200kbyte in order to not crash your browser. You can use the following linux shell script for a bit larger images but it is not recommend to include large files in-line in a web-page. 
#!/bin/sh
if [ ! -r "$1" ]; then
    echo "Usage: base64-image.sh someImageFile"
    exit 0
fi
mimetype=`file -b --mime-type $1`
echo -n "<img src=\"data:$mimetype;base64,"
base64 -w0 $1
echo "\">"


Written by Guido Socher, MIT license , version: 2018-05-20