画像からBase64エンコーダー HTML、CSS、およびコード内で埋め込むために、画像をBase64エンコードされたデータURIに変換します。
画像をBase64に変換
HTML、CSS、およびコード内で埋め込むために、画像をBase64エンコードされたデータURIに変換します。
画像をアップロード
Base64としてエンコードする画像ファイルを選択またはドロップします。
出力をコピー
データURI、生のBase64文字列、または完全なHTML imgタグをコピーします。
コードで使用
Base64データを直接HTML、CSS、またはJavaScriptコードに貼り付けます。
What Is 画像をBase64に変換?
イメージをBase64エンコーダーは、画像ファイルをHTML、CSS、またはJavaScriptコードに直接埋め込むことができるテキスト文字列に変換します。Base64エンコーディングでは、二進画像データがASCII文字として表現され、別々のファイル要求なしでインラインで画像を含めることができます。このツールは、完全なデータURI、API用の生のBase64文字列、および貼り付け可能なHTML imgタグの3つの出力を生成します。これは、小さなアイコン、ロゴ、UI要素などのHTTPリクエストを削減してパフォーマンスを向上させる場合に特に便利です。
Why Use 画像をBase64に変換?
-
3つの出力形式: データURI、生のBase64、およびHTMLタグ
-
小さな画像に対するHTTPリクエストを削減します
-
HTML、CSS、JavaScript用にコピー&ペースト可能
-
Base64の長さを表示してサイズを見積もることができます
Common Use Cases
HTML内のインライン画像
小さな画像を直接HTMLに埋め込んでHTTPリクエストを削減します。
CSSの背景画像
CSSのbackground-imageプロパティでBase64データURIを使用します。
メールテンプレート
HTMLメールに画像を直接埋め込んで破損した画像リンクを避けます。
APIペイロード
Base64エンコードされた画像を受け付けるAPI用のJSONペイロードに画像データを含めます。
Technical Guide
Base64エンコーディングでは、二進画像データが64個のASCII文字の文字列に変換されます。FileReader APIのreadAsDataURLメソッドでファイルを読み込み、データURIを生成します。Base64エンコーディングにより、データサイズは約33%増加するためです。これは、3バイトの二進データが4つのBase64文字になるためです。この理由から、小さな画像（10KB未満）に最も効率的です。
Tips & Best Practices
-
1小さな画像（アイコン、ロゴなど）に対して最適で、10KB以下の場合に使用することをお勧めします
-
2Base64ではファイルサイズが約33%増加するため、大きな画像には不向きです
-
3CSSでのデータURIは外部画像のように個別にキャッシュできないことに注意してください
-
4Webページへの簡単なコピー&ペースト用のHTML imgタグ出力を使用します
Related Tools
Frequently Asked Questions
Q Base64画像をいつ使用するべきですか?
Q Base64はなぜ元のファイルよりも大きいですか?
Q CSSでBase64を使用できますか?
Q すべての画像形式に対応していますか?
Q サイズ制限はありますか?
About This Tool
画像をBase64に変換 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.