まず最初に、テキストに変換したい画像を読み込みます。

ボタンを押すと読み込むファイルを選択するためのダイアログが表示されるので、変換したい画像ファイルを選択してください。
画像ファイルをボックスに直接ドロップすることでも選択できます。

読み込みが完了すると、画像は自動的にテキストに変換されます。
テキストボックス内に表示された「data:image/png;base64…」から始まるテキストがbase64で変換された画像データです。
このテキストを任意の場所に貼り付けることで画像を埋め込むことができます。

Data URI schemeとは、画像などのデータを「URI」という書式でテキストとして記述する仕組みのことです。
この仕組みを利用することにより画像をテキストに変換して送信したり、HTMLやCSSの内部に画像をテキストとして直接埋め込んだりすることができます。

↑の小さな十字の画像をData URI schemeでテキストに変換すると下記のようになります。 上記のテキストをコピー＆ペーストでブラウザのアドレスバーに入力すると画像が確認できます。
このテキストを画像ファイルへのアドレスの代わりにHTMLのimgタグやcssのbackground-imageなどに指定することで、画像をHTMLファイル内に埋め込むことができます。 アイコン画像などの小さい画像をData URI schemeでHTML内に直接埋め込むことによって、画像ファイルを読み込むためのサーバーへのリクエストを減らすことができ、サイトの表示速度が速くすることができます。

しかし、テキストで埋め込まれた画像はブラウザにキャッシュされない、テキスト化によって画像のデータサイズが大きくなるなどといったデメリットも発生します。
なので、埋め込みを無意味に多用しない、大きい画像では使わないなどの注意が必要です。