画像から Base64 へ

用途

Data URI は Base64 を使ってファイルのバイト列を URL に直接埋め込む仕組みで、別リクエストや外部ファイルを使わずに済みます。本コンバーターはドロップした画像を読み込み、HTML、CSS、Markdown、JSON に貼り付けられる data:image/...;base64,... 文字列を生成します。ファイルはブラウザから外に出ず、変換は FileReader.readAsDataURL で行います。

使うべきタイミング

• CSS にインライン化する小さなアイコン（4 KB 未満）。HTTP リクエストを節約し、初回ペイント時のフラッシュを避けられます。
• 自己完結型の HTML メール、シングルファイルのデモ、オフライン対応の PWA。
• Markdown ノート、Notion ページ、画像と一緒に流通させたいチャットスレッドへの貼り付け。
• テストフィクスチャやスナップショットファイルで、アセットをテストと一緒にコミットしたい場合。

よくある注意点

• サイズが膨らみます。 Base64 はおよそ 33% ペイロードが増えます。4〜8 KB を超えると、リクエスト節約の利点を埋め込みコストが上回ります。data URI はブラウザに別個にキャッシュされない点も影響します。
• ページ間で重複排除されません。 URI を埋め込むページごとにバイト列が再送されます。再利用するアセットは実 URL のままにし、ブラウザに 1 度だけキャッシュさせてください。
• メールクライアントの対応はまちまちです。 多くのモダンクライアントは data URI を表示しますが、Windows 版 Outlook は歴史的に <img src> でブロックしてきました。大量配信は CID 添付の方が安全です。
• SVG はラスタとは別です。 SVG はマークアップ直挿し（または URL エンコード）の方が Base64 より小さくなることが多いです。