画像からBase64

🖼️ 概要

画像ファイルをBase64文字列に変換し、別途画像URLなしでHTML、CSS、JavaScriptに直接埋め込めます。

📖 仕組み

Base64は64種類の印字可能文字でバイナリデータをエンコードします。メール（MIME）や一部のXMLペイロードなど、テキストのみのチャネルが必要な場面でよく使われます。

Base64でエンコードされた画像は、ファイルURLの代わりに使用できる単一の文字列になります。

✨ 機能

• 多形式対応： JPEG、PNG、GIF、WebP、SVGなど。
• ドラッグ＆ドロップ： ファイルをアップロードエリアにドロップして変換。
• ライブプレビュー： アップロード直後に画像とBase64出力を確認。
• ワンクリックコピー： Base64文字列をクリップボードにコピー。
• オンラインプレビュー： エンコードされた画像のプレビューを開く。
• ローカル処理： すべてブラウザ内で実行され、プライバシーを保護。

💡 手順

1. 画像をアップロードエリアにドラッグするか、クリックしてファイルを選択します。
2. 画像は自動的にBase64に変換されます。
3. 結果は下のテキストボックスに表示されます。
4. 「プレビュー」をクリックして新しいウィンドウで画像を開きます。
5. 「コピー」をクリックしてBase64文字列をコピーします。

📋 対応フォーマット

• 入力： JPEG、PNG、GIF、WebP、SVG、BMP、ICOなど。
• 出力： Base64文字列。
• ファイルサイズ： 10MB未満を推奨。非常に大きなファイルは遅くなる場合があります。

🎯 活用例

• Webページへの小さなアイコンや装飾の埋め込み。
• CSSでのBase64背景。
• メールテンプレートへのインライン画像。
• モバイルアプリの画像アセット。
• オフライン画像ストレージ。
• 小さなアセットのHTTPリクエスト削減。

⚠️ 注意事項

• Base64はファイルサイズを約33%増加させます。
• 大きな画像は非常に長い文字列になります。
• 小さな画像（約100KB未満）に最適です。
• CSS url()ではdata:image/…プレフィックスが必要です。
• このツールはdata:image/プレフィックスを自動的に含みます。
• すべてローカル処理 — 何もアップロードされません。

💻 使用例

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==" alt="image">

background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==');

const img = new Image();
img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==';

❓ よくある質問

• Base64はファイルを大きくしますか？
  はい — 3バイトが4文字になるため、約33%大きくなります。
• Base64画像はいつ使うべきですか？
  リクエスト数削減が読み込み速度に効く、小さなアセット（約100KB未満）向けです。
• どの画像形式に対応していますか？
  JPEG、PNG、GIF、WebP、SVG、BMP、ICOなどの一般的な形式です。
• 出力文字列をそのまま使えますか？
  はい — HTML、CSS、JavaScript用のdata:image/プレフィックスが含まれています。
• 大きな画像も変換できますか？
  はい、ただし非常に大きな画像はコード内で管理しにくい長い文字列になります。