データURIとは
画像そのものを文字列(Base64)にして、data:image/png;base64,.... の形でHTMLやCSSに直接書き込む方法です。
画像ファイルを別に読み込まなくてよいので、リクエストが1つ減ります。
使いどころ
効果があるのは、ごく小さい画像(アイコン、1×1の背景、装飾)です。 逆に大きな画像を埋め込むと、HTML/CSSが肥大化し、キャッシュも効かず、かえって遅くなります。 目安として、数KBを超える画像は普通に読み込むのがおすすめです。
画像は端末の外に出ません
選んだ画像はサーバーにアップロードされず、変換はすべてブラウザ内で完結します。
このツールについて
ブラウザ標準のFileReaderで変換しています。