画像をdata URI（Base64）に変換する方法｜HTML/CSSに直接埋め込む
公開日：2026年7月29日 対象ツール：画像→データURI（Base64）変換
小さなアイコンやロゴを HTML や CSS に直接書き込みたい。そんなときに使うのが data URI（データURI）です。画像ファイルの中身を Base64 でエンコードし、data:image/png;base64,... のような文字列にすることで、外部ファイルを別途読み込まずにマークアップの中へ画像を埋め込めます。このツールは、選んだ画像をその場でこの形式へ変換し、そのまま貼り付けて使える文字列として出力します。
このツールでできること
画像ファイルを選ぶだけで、data URI（Base64）文字列を生成します。主な機能は次のとおりです。
- ファイル選択またはドラッグ＆ドロップで画像を読み込み、data URI に変換
- 選択した画像のプレビュー表示
- ファイル名・形式（MIME）・元ファイルサイズ・data URI のサイズ（文字数）の表示
- 生成した文字列をワンクリックでコピー
PNG・JPEG・GIF・WebP・SVG など、ブラウザが画像として扱える形式に幅広く対応します。MIME タイプは元ファイルの種類がそのまま先頭に付きます。
使い方
- 「画像ファイルを選択」ボタンから画像を選ぶか、点線の枠内に画像をドラッグ＆ドロップします。
- その場で Base64 の data URI に変換され、テキストエリアに出力されます。
- プレビューで元画像を確認し、元ファイルのサイズと data URI のサイズを見比べます。
- 「data URIをコピー」ボタンで文字列をコピーします。
- img 要素の src 属性や、CSS の background-image の url() の中に貼り付けて利用します。
こんなときに便利
data URI が最も活きるのは、小さな画像を扱う場面です。アイコンやロゴ、装飾用の小さな画像を CSS に埋め込むと、その画像を読み込むための HTTP リクエストを1つ減らせます。リクエスト数が多いページでは、こうした細かな削減が表示の軽さにつながります。
- CSS の背景画像として小さなアイコンを埋め込み、リクエストを削減する
- 画像を外部ファイルに分けず、単一ファイルで完結させたい HTML メールや配布用のデモページ
- ブックマークレットや、Web フォント・SVG の埋め込み
いずれも「画像を1つのファイルにまとめたい」ケースで役立ちます。生成された文字列を CSS の該当プロパティに差し替えるだけなので、導入も簡単です。
よくある質問
画像はサーバーに送信されますか？
送信されません。変換はブラウザの FileReader 機能を使い、お使いの端末内だけで実行されます。画像がネットワーク上に送られることはなく、オフラインでも動作するため、プライバシーが気になる画像でも安心して変換できます。
変換後のサイズが元画像より大きいのはなぜ？
Base64 エンコードは3バイトのデータを4文字で表現するため、データ量が約1.37倍（約33%増）に膨らみます。data URI は必ず元画像より大きくなる点に注意してください。このツールは元ファイルと data URI 両方のサイズを表示するので、増加量を確認できます。
大きな画像を変換しても大丈夫ですか？
技術的には可能ですが、文字列が何万文字にもなり HTML/CSS の可読性や表示速度に悪影響が出ます。数十KB程度までの小さな画像での利用がおすすめです。大きな写真は従来どおり外部ファイルとして参照するほうが適しています。
用途を見極めて使えば、data URI はページを軽くする手軽な手段になります。まずは手元の小さなアイコンで、変換とサイズの変化を確かめてみてください。