data URI（データURI）とは何ですか？

data URI は、画像などのファイルの中身を Base64 でエンコードして URL 文字列そのものに埋め込む仕組みです。『data:image/png;base64,iVBORw0K...』のような形式で、外部ファイルを別途読み込まずに HTML や CSS の中に画像を直接書き込めます。

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

送信されません。変換はブラウザの FileReader 機能を使ってお使いの端末内だけで行われ、選択した画像がネットワーク上に送られることはありません。オフラインでも動作します。

小さなアイコンや装飾画像、ロゴなどを HTML/CSS に直接埋め込みたいときに便利です。HTTP リクエストを1つ減らせるほか、単一ファイルで完結する HTML メールやブックマークレット、デモ用の1枚ページなどにも向いています。

背景画像なら background-image の url() の中に、img 要素なら src 属性に、生成された data URI 文字列をそのまま貼り付けます。フォントや SVG も同様に埋め込めます。

Base64 エンコードは3バイトを4文字で表現するため、データ量が約1.37倍（約33%増）になります。したがって data URI は元画像より必ず大きくなり、大きな写真には不向きです。小さなアイコン等での利用がおすすめです。

PNG・JPEG・GIF・WebP・SVG・ICO など、ブラウザが画像として扱えるファイルに対応します。MIME タイプ（image/png など）は元ファイルの種類がそのまま data URI の先頭に入ります。

技術的には可能ですが、data URI の文字列が非常に長くなり、HTML/CSS の可読性や表示速度に悪影響が出ます。目安として数十KB程度までの小さな画像での利用を推奨します。大きな写真は通常の外部ファイル参照のほうが適しています。

画像ファイルを data URI（Base64）に変換します。HTML や CSS に直接埋め込める文字列を、その場で生成します。

ここに画像をドラッグ＆ドロップ
または

画像ファイルを選択

PNG / JPEG / GIF / WebP / SVG など

変換はすべてお使いのブラウザ内で行われ、画像はサーバーに送信されません。data URI は元画像よりデータ量が増えるため、小さなアイコン等に向いています。

※ Base64 エンコードはデータ量が約1.37倍（約33%増）になります。大きな写真は data URI にすると文字列が非常に長くなり表示や編集がしづらくなるため、数十KB程度までの小さな画像での利用がおすすめです。