画像 → 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)で完結し、画像がサーバーに送信されることはありません。社内資料や機密情報を含む画像でも外部に漏れる経路はありません。