How to create an inline Base64 image tag using Notepad++

This how to create an inline Base64 image tag using Notepad++, so can paste the following code into an email or use in your HTML SPA code.

  <img src="data:image/jpeg;base64,xxxxxxx" alt="inline of image" />

Here are the steps using Notepad++

1. Open your image in Notepad++, in the example image below, it's called clippy.jpg. 

2. Press CTRL-A to select all the text, this is very important to select all the text.

3. Choose Base64 Encode from Plugins menu to encode selected text to Base64. 

4. Add data:image/jpeg;base64, to the beginning if the text. The mime type must match image extension, for example for .PNG image file the mime type is image/png;base64 (appending ;base64 to indicate encoding). For .gif image/gif, See mime type list here, search for 'image/'.

5. Press CTRL-A and paste into your image src="PASTE HERE" tag. Make sure you have the double quotes.

5. OR Save this file as "clippy.jpg.b64" for future reference.