画像をBase64に変換
画像をBase64データURIに変換 — コードへの埋め込みに最適
🔒 画像がデバイスの外に出ることはありません。 すべての処理はFileReader APIを使用してブラウザ内でローカルに行われます。アップロード、サーバー、追跡は一切ありません。
特長
- データURI出力 — HTML、CSS、JavaScriptに直接貼り付けられる、完全なdata:image/... URI文字列を取得します。
- ワンクリックコピー — 生のデータURI、<img>タグ、またはCSSのbackground-imageプロパティとしてコピーできます。
- サイズ比較 — 元のファイルサイズとBase64文字列の長さを比較できます（Base64は約33%大きくなります）。
- 即時変換 — 変換は瞬時に完了 — 処理時間は不要です。
仕組み
- 画像をアップロード — 画像をドロップしてBase64に変換します。
- コピー形式を選択 — データURI、<img>タグ、またはCSSのbackground-imageとしてコピーします。
- コードに貼り付け — Base64文字列で画像をコードに直接埋め込めます — 別ファイルは不要です。
活用例
- 小さな画像をHTMLに直接埋め込みHTTPリクエストを削減
- 外部読み込みなしで表示されるHTMLメールのインライン画像
- スタイルシートに埋め込むCSSの背景画像
- 単一ファイル配布用にJavaScriptコードにアイコンをバンドル
よくある質問
Base64はいつ使うべきですか？
小さな画像（10KB以下）— アイコン、ロゴ、小さなUI要素に最適です。埋め込みにより追加のHTTPリクエストを回避できます。大きな画像は別ファイルとして提供する方が効率的です。
Base64文字列がファイルより大きいのはなぜですか？
Base64エンコーディングはバイナリデータをASCIIテキストに変換するため、サイズが約33%増加します。これは画像をコードに直接埋め込むための代償です。
画質は完全に保持されますか？
はい。Base64は同じバイナリデータの異なるエンコーディングに過ぎません — 画質の劣化は一切ありません。
関連ツール
- 🔁 フォーマット変換 — PNG、JPG、WebPの相互変換 — ブラウザで即時処理
- 📦 画像を圧縮 — 画質を損なわずファイルサイズを削減 — すべてブラウザ内で処理
- 🔗 URL Encoder / Decoder — Encode or decode URLs and query strings instantly