🖼 画像→データURI（Base64）変換

data URI（データURI）は、画像などのファイルの中身を Base64 でエンコードし、URL 文字列そのものに埋め込む仕組みです。『data:image/png;base64,iVBORw0K...』のような形をしていて、外部の画像ファイルを別途読み込まなくても、HTML や CSS の中に画像を直接書き込めます。本ツールは、選んだ画像ファイルをこの data URI 形式に変換し、そのままコピーして使える文字列として出力します。

使い方はとても簡単で、画像ファイルを選択するかドラッグ＆ドロップするだけです。変換はお使いのブラウザに組み込まれた FileReader という機能を使い、端末内だけで実行されます。選んだ画像がネットワークを通じてどこかのサーバーに送信されることはなく、通信が発生しないためオフラインでも動作します。プライバシーが気になる画像でも安心して変換できます。

data URI が役立つのは、主に小さな画像を扱う場面です。アイコンやロゴ、装飾用の小さな画像を HTML/CSS に直接埋め込むと、その画像を読み込むための HTTP リクエストを1つ減らせます。また、画像を外部ファイルに分けずに1つのファイルへまとめられるため、HTML メールやブックマークレット、配布用の単一ファイルのデモページ、Web フォントや SVG の埋め込みなどにも使われます。

一方で注意点もあります。Base64 エンコードは3バイトのデータを4文字で表現するため、変換後のデータ量は元の画像より約1.37倍（約33%増）に膨らみます。つまり data URI は必ず元画像より大きくなります。本ツールでは、元ファイルのサイズと生成された data URI のサイズ（文字数）の両方を表示するので、どれくらい増えたかを確認できます。

この性質から、data URI は数KB〜数十KB程度の小さな画像に向いています。大きな写真を data URI にすると文字列が何万文字にもなり、HTML/CSS ファイルが極端に長く読みにくくなるほか、ブラウザのキャッシュが効きにくくなり表示速度にも悪影響が出ることがあります。大きな画像は、従来どおり外部ファイルとして参照するほうが適しています。

生成した data URI は、img 要素の src 属性に貼り付ければそのまま画像として表示され、CSS では background-image の url() の中に入れて背景画像として使えます。MIME タイプ（image/png など）は元ファイルの種類がそのまま先頭に付くため、PNG・JPEG・GIF・WebP・SVG など、ブラウザが画像として扱える形式に幅広く対応します。用途に合わせて、小さな画像の埋め込みに活用してください。