画像 → Base64 変換（data URL 生成）
使い方
画像ファイルをドロップエリアにドラッグするか、クリックしてファイルを選択すると、ファイルが Base64 文字列と data URL に変換されます。Data URL は CSS の `background-image` や HTML の `<img>` の `src` に直接埋め込めます。Base64 文字列のみが必要な場合はそちらをコピーできます。
Base64 と data URL の違い
Base64 は任意のバイナリデータを ASCII 文字列に変換するエンコーディング方式です。Data URL（`data:image/png;base64,...`）は MIME タイプとエンコーディング方式を含む URL 形式で、HTML や CSS から直接読み込めます。Base64 化するとファイルサイズは約 33% 増加するため、大きな画像をインライン化すると HTML / CSS が肥大化する点に注意。
活用シーン
- 小さなアイコンを CSS や HTML に直接埋め込みたい場合
- メールテンプレートで画像を外部参照なしで埋め込みたい
- 単一ファイル HTML（自己完結したデモなど）を作る
- ブラウザ拡張機能でアイコンをマニフェストに直接埋め込み
- テスト用のサンプルデータ生成（base64 文字列が必要な場面）
プライバシー
ファイルの読み取りと Base64 変換はすべてブラウザ内（FileReader API）で完結し、画像がサーバーに送信されることはありません。社内資料や機密情報を含む画像でも外部に漏れる経路はありません。
よくある質問
data URL と Base64 文字列のみの違いは何ですか？
Base64 文字列のみはエンコードされたバイト列そのものです。data URL はその文字列に data:image/png;base64, のような接頭辞を付けた形式で、CSS の background-image や HTML の <img> の src に直接埋め込めます。本ツールは両方を出力します。
エンコード時に画像はアップロードされますか？
いいえ。ファイルは FileReader API を使ってすべてブラウザ内で読み取り・エンコードされ、端末の外に出ることはありません。社内資料や機密情報を含む画像もローカルに留まります。
大きな画像を Base64 でインライン化すべきですか？
アイコンなど小さなアセットに向いています。Base64 化するとサイズが約 33% 増えるため、大きな画像をインライン化すると周囲の HTML や CSS が肥大化し、読み込み性能を損なう恐れがあります。大きな画像は外部参照ファイルのまま使うのが良いでしょう。
ファイルサイズの上限はありますか？
はい。10 MB を超えるファイルはエラーで拒否され、画像以外のファイルも拒否されます。これにより生成される Base64 文字列が扱いやすいサイズに保たれます。
どの画像形式をエンコードできますか？
ブラウザが認識できる画像ファイルであればエンコードできます。生成される data URL にはファイルの MIME タイプ（例: image/png、image/jpeg、image/svg+xml）が含まれ、ツール上にも表示されるので確認できます。