画像はサーバーに送信されますか？

いいえ。ファイルはブラウザのFileReader APIで読み込まれ、ローカルでエンコードされます。アップロードは一切行いません。

Data URIが元のファイルより大きくなるのはなぜですか？

Base64はバイナリ3バイトをASCII 4文字で表現するため、エンコード後は元のファイルより約33%大きくなります。ツールは両方のサイズを表示するので比較できます(例: "logo.png · 4.2 KB · Data URI 5.6 KB")。

どんなときに画像をData URIで埋め込むべきですか？

アイコンや小さなロゴなど、HTTPリクエスト1回の削減がサイズ増加より効く小さなアセットに向いています。大きな画像はHTML/CSSを肥大化させ個別キャッシュもできないため、通常は別ファイルとして配信する方が有利です。

画像 → Data URI変換ツール

概要

Data URIは data:<MIMEタイプ>;base64,<データ> という形式でファイルの内容を URLに直接埋め込む仕組みです。このツールは任意の画像をこの形式に変換し、 <img src>・CSSのbackground-image・JSONペイロードなどにインラインで使えるようにします。読み込みはブラウザのFileReader.readAsDataURLで行われ、アップロードはありません。変換後はファイル名・元サイズ・エンコード後サイズ・プレビュー・コピー可能なURI全文が表示されます。

使い方

Choose imageをクリックしてファイルを選択します。変換は即座に行われます。
情報行(ファイル名・元KB・Data URI KB)とプレビューで、意図した画像が変換されたか確認します。
Copyを押すとData URI全文がクリップボードにコピーされます。

使用例

1KBのfavicon PNGは data:image/png;base64,iVBORw0KGgo… で始まる文字列になり、<link rel="icon" href="…"> にそのまま貼れます。
小さな矢印アイコンをCSSにインライン化: background-image: url("data:image/svg+xml;base64,…") でリクエストを1つ削減。

注意事項

Data URIは埋め込み先ドキュメントと別にキャッシュされず、極端に長い文字列はエディタやdiffの動作を重くします。数KB程度のアセットに限定して使うのが目安です。