画像をdata URI（Base64）に変換する方法｜HTML/CSSに直接埋め込む
公開日：2026年7月29日 更新日：2026年9月2日 運営：シルギア（Analyzegear, Inc.） 対象ツール：画像→データURI（Base64）変換
小さなアイコンやロゴを、外部ファイルとして読み込まずに HTML や CSS の中へ直接書き込みたい。そんなときに使うのが data URI（データURI）です。画像の中身を Base64 でエンコードし、data:image/png;base64,... という一本の文字列にすることで、マークアップやスタイルシートの中に画像そのものを埋め込めます。このツールは、選んだ画像をその場でこの形式へ変換し、そのまま貼り付けて使える文字列として出力します。変換はすべてブラウザ内で完結します。
data URI（データURI）の仕組み
data URI は「データを URL として表した文字列」です。先頭に data: が付き、続けて MIME タイプ（image/png など）、;base64、そしてカンマの後にエンコード本体が並びます。ブラウザはこの文字列を、あたかも外部の画像ファイルであるかのように解釈して表示します。だから img の src 属性や CSS の url() の中に、ファイルパスの代わりとしてそのまま入れられます。
Base64 は、あらゆるバイト列を英数字と記号のわずか64種類の文字だけで表す方式です。バイナリの画像データを、テキストとして安全に扱える文字列へ置き換えるための仕組みで、HTML や CSS のようなテキストの中に画像を紛れ込ませても構造が壊れないようにします。
このツールでできること
画像ファイルを選ぶだけで、data URI 文字列を生成します。主な機能は次のとおりです。
- ファイル選択またはドラッグ＆ドロップで画像を読み込み、data URI に変換
- 選択した画像のプレビュー表示
- ファイル名・形式（MIME）・元ファイルサイズ・data URI のサイズ（文字数）の表示
- 生成した文字列をワンクリックでコピー
- 貼り付け用スニペットを「data URI そのまま」「HTML の img タグ」「CSS の background-image」から選んで出力・コピー
PNG・JPEG・GIF・WebP・SVG・ICO など、ブラウザが画像として扱える形式に幅広く対応します。画像以外のファイルを渡した場合は変換せず、画像を選ぶよう促すメッセージが表示されるので、うっかり別のファイルを埋め込む心配もありません。
使い方
- 「画像ファイルを選択」ボタンから画像を選ぶか、点線の枠内へ画像をドラッグ＆ドロップします。
- その場で Base64 の data URI に変換され、テキストエリアに出力されます。
- プレビューで元画像を確認し、元ファイルのサイズと data URI のサイズを見比べます。
- 「data URIをコピー」ボタンで文字列をコピーします。用途に合わせてスニペットの形式を選べば、img タグや background-image の一行をそのまま貼り付けられます。
- img 要素の src 属性や、CSS の background-image の url() の中に貼り付けて利用します。
なぜ変換後は大きくなるのか
Base64 は3バイトのデータを4文字で表現します。したがってエンコード後の文字数は、元のバイト数のおよそ 4÷3＝約1.33倍（約33%増）になります。data URI は必ず元画像より大きくなるという性質は、ここから来ています。
具体的に見てみます。3,000バイト（約3KB）の PNG アイコンなら、本体は 4×(3,000÷3)＝4,000文字。これに先頭の「data:image/png;base64,」約22文字が加わり、合計約4,022文字（＝約4,022バイト）になります。元の3,000バイトに対して約34%増です。1,024バイト（1KB）の画像なら本体は約1,368文字、先頭を含めて約1,390文字となり、増加率は約36%まで上がります。
小さな画像ほど先頭の固定文字列の影響が相対的に大きくなるため、本ツールは実用的な目安として元サイズの約1.37倍で見積もりを表示します。理論値の約1.33倍よりわずかに大きめですが、あらかじめ膨らみを把握するのに役立ちます。画面には元ファイルと data URI 両方のサイズが並び、実際の増加量も確認できます。
向いている場面・向かない場面
data URI が最も活きるのは、小さな画像を扱う場面です。アイコンやロゴ、装飾用の小画像を CSS に埋め込むと、その画像を読み込むための HTTP リクエストを1つ減らせます。リクエスト数が多いページでは、こうした細かな削減が表示の軽さにつながります。画像を外部ファイルに分けず1つにまとめられるため、HTML メールや配布用のデモページ、ブックマークレット、Web フォントや SVG の埋め込みにも向いています。
一方、大きな写真には不向きです。文字列が何万文字にもなって HTML/CSS の可読性を損ない、ブラウザのキャッシュも効きにくくなって表示速度に悪影響が出ます。本ツールでもファイルが100KBを超えると注意を表示します。目安として数十KB程度までにとどめ、それより大きい画像は従来どおり外部ファイルとして参照するのが無難です。
よくある質問
画像はサーバーに送信されますか？
送信されません。変換はブラウザの FileReader 機能を使い、お使いの端末内だけで実行されます。画像がネットワーク上に送られることはなく、通信が発生しないためオフラインでも動作します。プライバシーが気になる画像でも安心して変換できます。
生成した文字列はどう貼り付けますか？
img 要素なら src 属性に、CSS の背景画像なら background-image の url() の中に、data URI をそのまま入れます。スニペット機能で HTML や CSS の形を選べば、貼り付け先に合わせた一行がそのまま得られるので、タグや url() の書き方を覚えていなくても迷いません。
大きな画像を変換しても大丈夫ですか？
技術的には可能ですが、文字列が何万文字にもなり HTML/CSS の可読性や表示速度に悪影響が出ます。数十KB程度までの小さな画像での利用がおすすめです。まずは手元の小さなアイコンで、変換とサイズの変化を確かめてみてください。