There are 2 ways to add an image to your html page.
1) Add it inline using your tag within html file
2) Add it using CSS
Everyone knows how to do it the both ways, but the best way to do is by using base64 encoder and adding the content data uri to the image.
I use a simply encoder utility tool from WebSemantics @ http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/
The above utility tool does not allow images with large sizes, and here is another tool which does the same..
However, there are many tools that are available in the market. You can also have your own base64 algorithm to encode the images for security purposes (like avoiding “HOT LINKING“).
Given the input image, this tool gives you a base64 encoded data, which you would want to use it to attach it to html or css.