This post has an in-line image. The hydrant is not sourced from an external host (<img src="http://SOME_HOST/image.jpg>). It was converted to base64 using Firefox's "Base64 ⇒ Encoder 1.3.2" plug-in and pasted into the post editor.
This is not an ideal situation for a couple of reasons, but can be used in a pinch. Reason #1 is the image is larger in byte-size than the original, and is full sized: that costs bandwidth and causes page-load speed issues. Another is the size slows the editor.
In this demo, I took a 1,400px high image with a file size of 195KB and scaled it to 500px high. That reduced the file size to <30KB.
Using the Firefox add-on, you select the image, the conversion is done, and the base64 file is saved with a .data extension. Opening the file with a plain text editor reveals the start of the content is: data:image/jpeg;base64,
The comma is followed by the encoded image. The base64 code ends at the end of the file.
To make that useable in a post, add a normal <img src> wrapper: <img src=" - the opener. " alt="" /> - closes the tag.
So, the whole thing will look like this: <img src="data:image/jpeg;base64,the_full_image_code_which_will_be_large" alt="" />
Styles, like width:, height:, border, etc., can be added as usual: <img style="width:200px; height:300px; border: 1px solid #ff00ff;" src="data:image/jpeg;base64...
Another use for the in-line image might a favicon if you don't have a host. Create the base64 file the same way, then add the code to a <link> tag in the page's <head> section.
<link href='data:image/x-icon;base64,the_full_image_code' rel='icon' type='image/x-icon' />
If you are using Blogger, the best placement is just before </head>.
