Base64 画像と data URL：使う場面と避ける場面
小さな画像には便利ですが、サイズ、キャッシュ、性能の取引があります。
仕組み
data URL は小さなファイルを URL 文字列の中に入れます。画像では data:image/png;base64, で始まる形がよく使われます。
向く場面
小さなアイコン、テスト、簡単なメール画像、生成プレビューに向きます。
コスト
Base64 は3バイトを4文字にします。HTML や CSS が大きくなり、ブラウザーは先にそれを読む必要があります。
制限
MDN は長さ制限と安全上の注意を示しています。現代のブラウザーは phishing 対策で data: URL へのトップレベル遷移をブロックします。
実用ルール
ソースに貼っても読める小さなファイルだけを inline にします。通常の画像やアップロードは別ファイルにします。