Base64が長くなる理由
Base64は3バイトを4文字に移します。そのため出来上がる文字列は元のファイルより3分の1ほど長くなります。さらに data:image/png;base64, のような前置きや改行も加わります。5MBの画像なら文字列は6.7MBを超えます。
data: URIが向く場所
ファイルを別に置けない場所で使います。CSSの background-image、HTMLの <img src>、画像を本文に含めたいメール署名などです。ごく小さなアイコンをいくつか埋め込めば、その分リクエストも減ります。
大きな画像には向きません
data: URIは自分のアドレスを持たないため、個別に参照することも使い回すこともできません。同じ画像が必要なページはそれぞれ自前のコピーを抱え込み、その画像を1つ差し替えるだけで、それが入っているスタイルシート全体のキャッシュが無効になります。HTMLに直接埋め込んだ場合はさらに厄介で、HTMLはたいていキャッシュされないので訪問のたびに同じバイト列が流れます。背景写真のような大きい画像は、ファイルのまま置いてリンクする方が速いです。埋め込みは1KB前後の小さなアイコンまでが無難です。
URL-safe版が別にある理由
標準のBase64は + と / を使います。この2文字はURLやファイル名の中では別の意味に読まれるため、アドレスに載せるときは - と _ に置き換えたURL-safe版を使います。末尾の = も省くのが普通です。JWTがこの形式で書かれており、このツールはどちらの形式も受け取ります。