画像を HTML / CSS / Markdown にそのまま貼れる Base64 テキストに変換します。出力形式は 5 種類。変換はすべてこの端末上で行い、画像はアップロードされません。
アイコン、区切り線、ローディングアニメーションのような数百バイトから数 KB のものは、外部リンクのほうがかえって遅くなります。ブラウザはまず HTML を解析してアドレスを見つけ、DNS、接続、ハンドシェイクを経て、最後に数百バイトの画像を取得します。画像本体はごく一部で、残りはすべて固定のオーバーヘッドです。Data URI に変換すれば、文字が HTML と一緒に届くため、描画時にネットワークを待つ必要がありません。
単一ファイルでの配布にも向いています。オフラインの HTML レポート、人に送るデモ、外部 CDN に到達できない社内ページなどは、インライン化しておけば「フォルダを 1 つコピーし忘れて画像が全部壊れる」ことがありません。
逆に、記事の挿絵、商品画像、サムネイル、アイコン、ロゴはインライン化すべきではありません。複数のページで繰り返し使われ、個別のキャッシュが必要で、画像検索に拾われるための独立した URL も必要だからです。判断は一言で済みます。この画像は別の場所でもう一度使うか？使うなら外部リンクにします。
インライン化が節約できるのは初回アクセス時の 1 リクエストと往復遅延だけで、代わりに画像が HTML や CSS の一部となり、ブラウザは個別にキャッシュしません。ページを読み込むたびにこのテキストも再転送されます。外部リンクの画像には独立したキャッシュと 304 チェックがあり、再訪問時はほぼコストゼロです。HTTP/2 と HTTP/3 では複数の画像がもともと 1 つの接続を共有できるため、リクエストを減らす価値は HTTP/1.1 の時代よりずっと小さく、遅延の大きいネットワークでのみ目立ちます。
スプライト画像と比べると、どちらもリクエストを減らすためのものです。アイコンが 5、6 個までならインライン化が手軽で、座標を管理する必要もありません。それ以上ならスプライト画像かアイコンフォントを使うべきで、画像を差し替えてもテキスト全体を触らずに済みます。SVG アイコンは実は Base64 にする必要がありません。SVG 自体がテキストなので、そのままインライン化すれば currentColor を継承でき、CSS で色を変えられます。Base64 に変換すると長所を失うため、CSS の background-image にどうしても入れる必要があるときだけ価値があります。
他のオンライン変換サービスとの違いは、ファイルがどこへ行くかです。それらのサイトは画像をサーバーに送って符号化するため、元画像が相手のマシンに残り、ページには広告も入ります。このツールはブラウザでファイルを読み込む（FileReader）ので、画像はこの端末から出ません。オフラインでも使え、プライバシーに関わる画像もそのままドラッグできます。弱い点も明確にしておきます。符号化だけを行い、圧縮も縮小もしないため、変換後の大きさは元画像次第です。2 MB を超えても警告するだけで止めません。インラインと外部リンクのどちらにすべきかも判断しません。
1.33 倍はどう計算されるのか？
Base64 は 3 バイト（24 ビット）ごとに 4 つの 6 ビットの組に分け、各組を 64 種類の印字可能文字の 1 つに対応させます。3 バイトが 4 文字になるので、比率は 4 ÷ 3 で約 1.33 です。元のファイル長が 3 の倍数でない場合は末尾に等号を 1 つか 2 つ補うため、最後に = や == がよく見られますが、これは単なるパディングです。
大きな画像をインライン化すると、なぜ初回表示が遅くなるのか？
HTML と CSS はレンダリングをブロックするため、ブラウザは解析が終わってから描画を始めます。500 KB の画像が約 670 KB のテキストになって HTML に埋め込まれると、その分だけ初回表示が遅れます。しかもこのテキストは全体をダウンロードし終えないとデコードできず、外部リンクの画像のように受信しながら表示することはできません。サーバーで gzip を有効にすれば一部は取り戻せますが、圧縮しても元のバイナリより小さくなることはありません。
Markdown や CSS に貼っても表示されない、よくある原因は？
img の src は二重引用符で囲むのが最も確実で、文字セットに引用符は含まれません。CSS の url(...) は引用符が必須です。文字列にプラス記号、スラッシュ、等号が現れるためです。Markdown は丸括弧でアドレスを囲み、alt 内の角括弧と丸括弧はエスケープが必要で、構文全体を同じ行に書かなければなりません。また、多くの Markdown レンダラーや CMS は data: アドレスをフィルタリングするため、貼り付けても画像が壊れます。
インライン化を絶対に使うべきでないのはどんな場合？
大きな画像（10 KB を超えたら検討が必要で、スマホの写真は論外）、1 ページに多数置く場合、ページをまたいで再利用するロゴ・アイコン・カバー画像、独立した URL で画像検索に拾われる必要がある画像（インライン化すると独自の URL を持ちません）、そして右クリックで保存したりメールに添付したりする画像（多くのメールクライアントはブロックします）。