こんばんは。きわさです。
HTMLで画像を表示する場合、一般的には下記のようにimgタグでファイル名を指定して画像を表示します。
<img src="test.png" />
この場合、htmlファイルとは別に画像ファイルが存在します。
それをhtmlファイルに埋め込んでしまおうというわけです。
その方法が
画像のBase64エンコードです。
エンコードすると下記の形式のテキストで表すことができます。
data:[<mediatype>][;base64],<data>
さきほどのtest.pngをエンコードしたテキストをimgタグのsrcに設定します。
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAE ～省略～ 6yinbdkiVGW07Prb9SWQV/VX3pVPO+2jQwO9z3d3Ef8f43+j4CAybewAAAAASUVORK5CYII=" />
もとの画像が大きければその分テキストも長くなりますが、
こうすることでHTMLファイルに画像を埋め込むことができます。
Base64エンコードする方法については下記記事参照
C#で画像をBase64エンコードする
Javascriptで画像をBase64エンコードする