画像 → Base64変換

画像をBase64データURIにエンコードし、HTML/CSSにインラインで埋め込めるコードを生成します。小さなアイコン·ロゴ·メール署名添付に。

📁 画像をドラッグまたはクリックで選択 PNG · JPG · GIF · WebP · SVG · ICO · BMP

使い方

1
画像をアップロード

ドラッグ·クリック·Ctrl+Vで画像を取り込み。PNG·JPG·GIF·WebP·SVG·ICO·BMP対応。

2
結果を確認

data URI·HTML <img>タグ·CSS background-imageコードが自動生成。プレビューと原本/Base64サイズ比較も表示。

3
コピー·使用

必要な形式(URI/HTML/CSS)横の「コピー」ボタンでワンクリックでクリップボードへ。

よくある質問

Base64エンコードとは?

バイナリデータ(画像·ファイル)をASCIIテキストで表現する方式。64文字(A-Z, a-z, 0-9, +, /, =)のみを使用するため、テキストベース環境(HTML·CSS·JSON·メール)に安全に埋め込めます。

なぜBase64でエンコード?

HTTPリクエスト削減(小さなアイコンが別ダウンロード不要)、オフライン動作(画像がコードに含まれる)、メールへのインライン添付などに利用。ただしファイルサイズが約33%増加するため、キャッシュが重要な大きい画像には不向き。

どこまで大きい画像が可能?

ブラウザのメモリ限界まで可能ですが、推奨は100KB以下の小さな画像です。1MB以上はBase64後に約1.33MBになり、ページ初期読み込みが大幅に遅くなる可能性があります。

CSSでの使い方は?

`background-image: url(data:image/png;base64,...)` 形式で使用します。「CSS」出力欄のコードをコピーしてそのまま使えます。SVGはより効率的な`data:image/svg+xml,...`エンコードも可能ですが、本ツールはすべてBase64に統一します。

サーバーに送信されますか?

いいえ。FileReader APIでブラウザ内のみエンコードされ、画像が外部に送信されることはありません。